刷新后如何留在选定的选项卡上？

I have created tabs for my content instead of different HTML files, using anchor tags and fading them in and out with jQuery, but one problem I face is that if the user refreshes the page the home tab (initial tab) will be selected instead of the previously opened one.

我已经为我的内容而不是不同的HTML文件创建了标签,使用锚标签并使用jQuery淡入淡出,但我面临的一个问题是,如果用户刷新页面,将选择主标签(初始标签)而不是以前开过的那个。

I am currently using sessionStorage to store the previously opened tab like below:

我目前正在使用sessionStorage存储以前打开的选项卡,如下所示:

$(document).ready(function() {

// Have the previously selected tab open
    if (sessionStorage.activeTab) {
        $('.tab-content ' + sessionStorage.activeTab).show().siblings().hide();
    //  ^ This one changes the tab to the previously opened, but after document has loaded :(
    }

// Enable, disable and switch tabs on click
$('.navbar .menu li a').on('click', function(e)  {
    var currentAttrValue = $(this).attr('href');

    // Show/Hide Tabs
    $('.tab-content ' + currentAttrValue).fadeIn(2000).siblings().hide();
    sessionStorage.activeTab = currentAttrValue;

    // Change/remove current tab to active
    $(this).parent('li').addClass('active').siblings().removeClass('active');
    $('.navbar .menu li a span').removeClass('active_span').removeClass('active_span2');
    $(this).children().addClass('active_span');
    e.preventDefault();
 });

In the lower part of my code above, I have these lines which make white the icon and the word (eg. () Parentheses) belonging to the current tab white to show that they are active:

在我上面的代码的下半部分,我有这些行使白色的图标和属于当前选项卡白色的单词(例如。()括号)显示它们是活动的:

$(this).parent('li').addClass('active').siblings().removeClass('active');
// ^ Icon

$(this).children().addClass('active_span');
// ^ Word

I tried to set them as items in sessionStorage too, as so:

我试图将它们设置为sessionStorage中的项目,如下所示:

sessionStorage.activeIcon = $(this).parent('li');
sessionStorage.activeWord = $(this).children();

but when I called them in the:

但当我打电话给他们时:

if (sessionStorage.activeTab) {}

it returned 'Null'. How can I save the icon and the word belonging to the previously opened tab and make them white as well as load all of them along with the tab before the document is loaded, so that no visible result of the changed is seen by the user?

它返回'Null'。如何保存属于以前打开的选项卡的图标和单词,并将它们设置为白色,并在加载文档之前将其与标签一起加载,以便用户看不到更改的可见结果?

It doesn't necessarily have to use sessionStorage. Any working answer or any answer that will put me on the right track is gladly accepted.

它不一定要使用sessionStorage。任何工作答案或任何能让我走上正轨的答案都很乐意接受。

I am looking forward to reading your answers :)

我期待着阅读你的答案:)

P.S: I'm not using jQuery UI tabs or any other third party plugin.

P.S:我没有使用jQuery UI选项卡或任何其他第三方插件。

[EDIT]

HTML (Tab-links):

<div class = "navbar tabs">
    <ul class = "menu tab-links">
        <li class = "active"><a class = "links" href = "#Dashboard"><span class = "focus active_span"><i class="fa fa-home fa-fw" aria-hidden = "true"></i><span class = "hider active_span">&nbsp;Dashboard</span></span></a></li>
        <li><a class = "links" href = "#Analytics"><span class = "focus"><i class = "fa fa-bar-chart fa-fw" aria-hidden = "true"></i><span class = "hider">&nbsp;Analytics</span></span></a></li>
        <li><a class = "links" href = "#Affiliate"><span class = "focus"><i class = "fa fa-user-plus fa-fw" aria-hidden = "true"></i><span class = "hider">&nbsp;Affiliate</span></span></a></li>
        <li><a class = "links" href = "#CashOut"><span class = "focus"><i class = "fa fa-money fa-fw" aria-hidden = "true"></i><span class = "hider">&nbsp;Cash Out</span></span></a></li>
        <li><a class = "links" href = "#Contest"><span class = "focus"><i class = "fa fa-trophy fa-fw" aria-hidden = "true"></i><span class = "hider">&nbsp;Contest</span></span></a></li>
        <li><a class = "links" href = "#Game"><span class = "focus"><i class="fa fa-gamepad fa-fw" aria-hidden = "true"></i><span class = "hider">&nbsp;Game</span></span></a></li>
        <li><a class = "links" href = "#FAQ"><span class = "focus"><i class = "fa fa-question-circle fa-fw" aria-hidden = "true"></i><span class = "hider">&nbsp;FAQ</span></span></a></li>
        <li><a class = "links" href = "#Settings"><span class = "focus"><i class = "fa fa-cog fa-fw" aria-hidden = "true"></i><span class = "hider">&nbsp;Settings</span></span></a></li>
    </ul>
</div>

HTML (Tab-content):

<div class = "tab-content">
    <div id = "Dashboard" class = "active tab"></div>
    <div id = "Analytics" class = "tab"></div>
    <div id = "Affiliate" class = "tab"></div>
    <div id = "FAQ" class = "tab"></div>
    <div id = "Settings" class = "tab"></div>
</div>

[SOLVED]

JavaScript:

To make the code work, we have to replace:

为了使代码有效,我们必须替换:

// Have the previously selected tab open
    if (sessionStorage.activeTab) {
        $('.tab-content ' + sessionStorage.activeTab).show().siblings().hide();
    //  ^ This one changes the tab to the previously opened, but after document has loaded :(
    }

with:

var activeTab = sessionStorage.activeTab;
$(".tab-content").fadeIn(1000);
if (activeTab) {
    $('.tab-content ' + activeTab ).show().siblings().hide();
    // also make sure you your active class to the corresponding tab menu here
    $(".menu li a[href=" + "\"" + activeTab + "\"" + "]").parent().addClass('active').siblings().removeClass('active');
    $(".menu li a[href=" + "\"" + activeTab + "\"" + "]").children('span').addClass("active_span").parent().parent().siblings().children().children().removeClass('active_span');
    $(".menu li a[href=" + "\"" + activeTab + "\"" + "]").children('span').children().addClass("active_span").parent().parent().parent().siblings().children().children().children().removeClass('active_span');
}
else {
    activeTab = "#Dashboard";
    $('.tab-content ' + activeTab ).show().siblings().hide();
    // also make sure you your active class to the corresponding tab menu here
    $(".menu li a[href=" + "\"" + activeTab + "\"" + "]").parent().addClass('active').siblings().removeClass('active');
    $(".menu li a[href=" + "\"" + activeTab + "\"" + "]").children('span').addClass("active_span").parent().parent().siblings().children().children().removeClass('active_span');
    $(".menu li a[href=" + "\"" + activeTab + "\"" + "]").children('span').children().addClass("active_span").parent().parent().parent().siblings().children().children().children().removeClass('active_span');
}

HTML:

In the HTML, we have to remove the classes 'active' and 'active_span' from the default <li> and <a> respectively.

在HTML中,我们必须分别从默认的

和中删除类“active”和“active_span”。

<li class = "active"><a class = "links" href = "#Dashboard"><span class = "focus active_span"><i class="fa fa-home fa-fw" aria-hidden = "true"></i><span class = "hider active_span">&nbsp;Dashboard</span></span></a></li>

CSS:

Finally, in CSS we have to set the tab-content:

最后,在CSS中我们必须设置tab-content:

display: none;

Thanks to @KishoreBarik and @DavidChelliah for their tremendous help.

感谢@KishoreBarik和@DavidChelliah的巨大帮助。

3 个解决方案

#1

If you are using hash mechanism, inside your document ready function replace your code

如果您使用的是哈希机制,则在文档就绪函数中替换您的代码

if (sessionStorage.activeTab) {
        $('.tab-content ' + sessionStorage.activeTab).show().siblings().hide();

with code to show the active tab as per hash like

用代码按照哈希的方式显示活动选项卡

var activeTab = window.location.hash;
if(activeTab.length){
  $('.tab-content ' + activeTab ).show().siblings().hide();
  // also make sure you set your active class to the corresponding tab menu here
}

#2

Most of the tab based solutions prefer hash value in the URL to deep link their content. The hash value from the URL will be set in URL, like below

大多数基于选项卡的解决方案更喜欢URL中的哈希值来深层链接其内容。 URL中的哈希值将在URL中设置,如下所示

Www.xyz.com/test#tab1

tab1 is the ID of the tabbed content div and this also semantically reveals a correct meaning that, tab1 is a content internal document heading/link that should be in focus. Even if page reloads, the browser will tend to automatically scroll down to that particular content section.

tab1是选项卡式内容div的ID,这也在语义上揭示了一个正确的含义,tab1是一个应该聚焦的内容内部文档标题/链接。即使页面重新加载,浏览器也会自动向下滚动到该特定内容部分。

From the implementation point of view, On pageload just read through your tab anchor links and compare it against the hash value in the URL. If it matches, highlight the particular tab. This kind of offloads the requirement from your part to persist the last clicked link.

从实现的角度来看,On pageload只是读取标签锚链接并将其与URL中的哈希值进行比较。如果匹配,请突出显示特定选项卡。这样可以减轻您的部分要求,以保留最后点击的链接。

  $(function() {
    var hash = window.location.hash;
    var selectedTab = $('.navbar .menu li a [href= "'+hash+'"]');
    if(selectedTab.length){
         //Do your particular tab toggling
     }
});

#3

sessionStorage should be used with .setItem() and .getItem() function.

sessionStorage应与.setItem()和.getItem()函数一起使用。

Storage can only store data in string form, so when you need store object, you should use JSON.stringify() to change it to string, and JSON.parse() before you use it. So you can store the activeTab, word and icon in one object.

存储只能以字符串形式存储数据,因此当您需要存储对象时,应使用JSON.stringify()将其更改为字符串,并在使用之前使用JSON.parse()。因此,您可以将activeTab,word和图标存储在一个对象中。

I suggest you store the icon by its class, jQuery object can't be used after JSON stringify and parse. The same with word.

我建议你按类保存图标,jQuery stringify和parse后不能使用jQuery对象。同样的话。

There is no need to change the tab before document.ready, just add display: none; to body, and make it visible after you change the tab.

在document.ready之前无需更改选项卡,只需添加display:none;更改选项卡后,将其显示为正文。