Jquery tab menu cookie

Question

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 !

Answer 1

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

Answer 2

$.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');

Answer 3

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