Jquery 选项卡菜单 cookie

Question

我使用“tab-title”属性来激活整个菜单，但我无法处理 cookie 以及如何在刷新页面后将“活动”状态设置为由保存的 cookie 生成的特定菜单. cookie 是，它有一个取自“tab-title”属性的值，但我不知道如何为“tab”类启用“活动”状态。有什么提示吗？

html

    <div class="tabbed_area">
    <ul 
        <li><a href="#" tab-title="nodeinfo-tab1" class="tab active"><i class="fa fa-sitemap fa-lg" aria-hidden="true"></i>&nbsp;&nbsp;TAB1</a></li>
        <li><a href="#" tab-title="nodeinfo-tab2" class="tab"><i class="fa fa-bar-chart-o fa-lg" aria-hidden="true"></i>&nbsp;&nbsp;TAB2</a></li>
        <li><a href="#" tab-title="nodeinfo-tab3" class="tab"><i class="fa fa-bar-chart-o fa-lg" aria-hidden="true"></i>&nbsp;&nbsp;TAB3</a></li>
        
    </ul>
<div id="nodeinfo-tab1" class="cont">
        <table cellpadding="5" cellspacing="0" width="100%" align="center">
                <tr class="dark-edit">
                    <td class="nodeinfo-section-title" width="40%" colspan="2"nowrap><b>Head</b></td>
                </tr>
                <tr>
                    <td  class="tleft-edit" width="50%">TD1</td>
                    <td  class="tright-edit" width="50%" nowrap>TD2</td>
                </tr>
</div>

<div id="nodeinfo-tab2" class="cont">
        <table cellpadding="5" cellspacing="0" width="100%" align="center">
                <tr class="dark-edit">
                    <td class="nodeinfo-section-title" width="40%" colspan="2"nowrap><b>Head</b></td>
                </tr>
                <tr>
                    <td  class="tleft-edit" width="50%">TD1</td>
                    <td  class="tright-edit" width="50%" nowrap>TD2</td>
                </tr>
</div>

<div id="nodeinfo-tab3" class="cont">
        <table cellpadding="5" cellspacing="0" width="100%" align="center">
                <tr class="dark-edit">
                    <td class="nodeinfo-section-title" width="40%" colspan="2"nowrap><b>Head</b></td>
                </tr>
                <tr>
                    <td  class="tleft-edit" width="50%">TD1</td>
                    <td  class="tright-edit" width="50%" nowrap>TD2</td>
                </tr>
</div>

</div>

jquery

    $(document).ready(function(){
      $("a.tab").click(function(){
 
 var activeTabId = $(this).attr("tab-title");


            
        $(".active").removeClass("active");
             
        $(this).addClass("active");
         
                   
        $(".cont").slideUp();
          
       
        $("#" + activeTabId).slideDown();
        
    
    
        
        setCookie("activeTab", activeTabId, 1);    
    

    });
    var selectedID = getCookie("activeTab");
    if (selectedID) {
    $('a.tab[tab-title=' + activeTabId + ']').addClass('active');
}
});
function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

我对这条线有疑问$('a.tab[tab-title=' + activeTabId + ']').addClass('active');

任何帮助将不胜感激

谢谢！

Answer 1

对于某些系统，cookie 将被加密，因此在某些情况下您无法使用它。相反，您可以尝试保存到本地存储。我试过你的代码，当 cookie 没有被加密时它可以工作

Answer 2

$.cookie('activeTab', activeTabId); 有效，但我仍然无法获得 cookie 记住的“标签标题”值的活动状态。 我希望在已保存菜单选择的“选项卡”类上设置“活动”状态。 <li><a href="#" tab-title="nodeinfo-tab1" class="tab active">

下面的代码有问题吗？

$('a.tab[tab-title=' + activeTabId + ']').addClass('active');

Answer 3

$(".cont").hide(); 丢失，工作代码是

var selectedID = $.cookie("activeTab");
if (selectedID) {
$(".active").removeClass("active");
$(".cont").hide();
$('a.tab[tab-title=' + selectedID + ']').addClass('active');
$("#" + selectedID).show();

下面的代码工作到一定程度，它会记住 cookie，读取其内容并将状态设置为我想要的“活动”。问题是它不显示与存储值相关的内容，而总是显示第一个菜单项。

$(document).ready(function(){
      $("a.tab").click(function(){
 
 var activeTabId = $(this).attr("tab-title");


            
        $(".active").removeClass("active");
             
        $(this).addClass("active");
         
                   
        $(".cont").slideUp();
          
       
        $("#" + activeTabId).slideDown();
        
    
    
        $.cookie('activeTab', activeTabId);
     
    

    });
    var selectedID = $.cookie("activeTab");
    if (selectedID) {
    $(".active").removeClass("active");
    $('a.tab[tab-title=' + selectedID + ']').addClass('active');
    $("#" + selectedID).show();
}
});