Jquery tab menu cookie-CodePudding

I use the "tab-title" attribute to liven up the entire menu, but I can't cope with the cookie and how after refreshing the page, set the "active" status to a specific menu resulting from the saved cookie. The cookie is, it has a value taken from the "tab-title" attribute, but I don't know how to enable the "active" status for the "tab" class. Any hints?

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);
        }
    }
}

I have issue with this line $('a.tab[tab-title=' activeTabId ']').addClass('active');

Any help will be appreciated

Thank you !

CodePudding user response：

for some system, cookies will be encrypted so you can't use that in some cases. Instead you can try saving to local storage. I tried your code and it works when cookies are not being encrypted

CodePudding user response：

Problem with set and get cookie value so you have to use proper way as mentioned in below url for that.

How do I set/unset a cookie with jQuery?

CodePudding user response：

$.cookie('activeTab', activeTabId); works but I still can't get active state on cookie remembered 'tab-title' value. I would like the 'active' status to be set on the 'tab' class of the saved menu selection. <li><a href="#" tab-title="nodeinfo-tab1" class="tab active">

Theres something wrong with below code ?

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

CodePudding user response：

$(".cont").hide(); was missing, working code is

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

The code below works up to a point, It's remember the cookie, read its content and set the status 'active' where I want. The problem is that it does not display the content related to the stored value, but always the first menu item.

$(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();
}
});