CODEWITHSUNDEEP
jquerycookiestabsrefresh
Andrew
Andrew

Reputation: 43

jQuery cookie on tabs for page refresh

I got this doing my tabs:

$('.tabed .tabs li:first-child').addClass('current');
$('.tabed .block:first').addClass('current');

$('.tabed .tabs li').click(function(){
        var tabNumber = $(this).index();
        $(this).parent('ul').siblings('.block').removeClass('current');
        $(this).siblings('li').removeClass('current');
        $(this).addClass('current');
        $(this).parent('ul').parent('.tabed').children('.block:eq('+ tabNumber +')').addClass('current');
});

How can I implement the jQuery cookie plugin in there so that the "current" tab is shown after page refresh?

Upvotes: 1

Views: 554

Answers (2)

Ryan
Ryan

Reputation: 1395

I don't think you need a jQuery cookie plugin to achieve this.

What if you try setting the index of the current tab in the hash:

$(".tabed .tabs li").on("click", function () {
    /* ... Your stuff here ... */
    window.location.hash = tabNumber;
});

if (window.location.hash) {
    var tabId = parseInt(window.location.hash.split("#")[1]);

    $(".tabed .tabs li:nth-child(" + (tabId - 1) + ")").addClass("current");
}

Upvotes: 0

James Kleeh
James Kleeh

Reputation: 12228

So I do this based on the id of the tab, however you could do the same based on index if you wish:

$(document).on("click", "#tabs > li", function(){
    if(this.id)
        $.cookie("tab", this.id);
});    

if($.cookie("tab"))
{
    $("#"+$.cookie("tab")).addClass('active');
    $("#"+$.cookie("tab")+"content").addClass('active');
}
else
{
    $('.tabbable > .nav-tabs > :first-child').addClass('active');
    $('.tab-content > :first-child').addClass('active');
}

Upvotes: 1

Related Questions