刷新后如何留在选定的标签上？

时间：2016-06-03 05:28:09

标签： javascript jquery html css

我为我的内容创建了标签，而不是使用不同的HTML文件，使用锚标签并使用jQuery淡入淡出，但我面临的一个问题是，如果用户刷新页面，则主页选项卡（初始标签）将是选择而不是之前打开的那个。

我目前正在使用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();
 });

在我上面代码的下半部分，我有这些行使白色成为白色的图标和属于当前标签白色的单词（例如。（）括号）以显示它们处于活动状态：

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

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

我也尝试将它们设置为sessionStorage中的项目，如下所示：

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

但是当我在：

中打电话给他们时 
if (sessionStorage.activeTab) {}

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

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

我期待着阅读你的答案：）

P.S：我没有使用jQuery UI标签或任何其他第三方插件。

[编辑]

HTML（制表符链接）：

<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（标签内容）：

<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>

[解决]

JavaScript的：

为了使代码有效，我们必须替换：

// 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 :(
    }

使用：

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：

在HTML中，我们必须分别从默认的 <li> 和 <a> 中删除“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：

最后，在CSS中我们必须设置tab-content：

display: none;

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

3 个答案:

答案 0 :(得分：1)

大多数基于标签的解决方案都倾向于在网址中使用哈希值来深层链接其内容。 URL中的哈希值将在URL中设置，如下所示

Www.xyz.com/test#tab1

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

从实施的角度来看，  在页面加载时，只需读取选项卡锚点链接，并将其与URL中的哈希值进行比较。如果匹配，请突出显示特定选项卡。这种方式可以减轻您的需求，以保留最后点击的链接。 

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

答案 1 :(得分：1)

如果您使用哈希机制， 在文档就绪功能中 替换你的代码

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

使用代码按照

这样的哈希显示活动选项卡 
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 :(得分：0)

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

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

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

无需在document.ready之前更改标签，只需将display: none;添加到正文，并在更改标签后将其显示。

相关问题
最新问题