CODEWITHSUNDEEP
javascriptjqueryhtml
Rajat Suneja
Rajat Suneja

Reputation: 552

Selected Tab on page refresh

I have created a tabbed web page and i need to get to the selected tab when i refresh the web page...

I have tried but no success..

Fiddle...

$(document).ready(function(){

    // When a link is clicked
    $("a.tab").click(function () {


        // switch all tabs off
        $(".active").removeClass("active");

        // switch this tab on
        $(this).addClass("active");

        // slide all content up
        $(".content").slideUp();

        // slide this content up
        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();
    });
});

Upvotes: 0

Views: 1484

Answers (2)

SachinGutte
SachinGutte

Reputation: 7055

By using cookie plugin from https://github.com/carhartl/jquery-cookie 

var prevActiveTab = $.cookie("activeTabIndex");

$("a.tab").removeClass("active");
var $oldActive = $("a.tab").eq(prevActiveTab).addClass("active");
$(".content").slideUp();
var content_show = $oldActive.attr("title");
$("#"+content_show).slideDown();

// When a link is clicked
$("a.tab").click(function () {

$.cookie("activeTabIndex",$("a.tab").index($(this)));
// switch all tabs off
$(".active").removeClass("active");

// switch this tab on
$(this).addClass("active");

// slide all content up
$(".content").slideUp();

// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();

});

What is done here, when tab is changed cookie is modified with index of active tab element. On page refresh, get that index and set class to active and remove other classes as well.

UPDATE As the amount of data that need to stored is very less, you can opt-in for cookie approach instead of localstorage. Browser compatibility is also the issue if you want to target IE < 8.

Upvotes: 1

PSL
PSL

Reputation: 123739

Have a look at this:-

right now i am storing preference in the localstorage.

See Ref for DOM storage options. But cookie might be a safe option in your case or store it in the server.

Demo

storage Logic

 if (localStorage.activeTab) {//see if a tab has been stored in the localStorage

    $('.active').removeClass('active');
    $(".tabs li:nth-child(" + (parseInt(localStorage.activeTab, 10) + 1) + ")  a.tab").addClass('active'); //Select that tab based on preference.
   }


localStorage.activeTab = $(this).parent().index(); //Store the tab in the storage.

Full Script

$(document).ready(function () {


    if (localStorage.activeTab) {//see if a tab has been stored in the localStorage

        $('.active').removeClass('active');
        $(".tabs li:nth-child(" + (parseInt(localStorage.activeTab, 10) + 1) + ")  a.tab").addClass('active'); //Select that tab based on preference.
    }
    // When a link is clicked
    $("a.tab").click(function () {


        // switch all tabs off
        $(".active").removeClass("active");

        // switch this tab on
        $(this).addClass("active");
        localStorage.activeTab = $(this).parent().index(); //Store the tab in the storage.
        // slide all content up
        $(".content").slideUp();

        // slide this content up
        var content_show = $(this).attr("title");
        $("#" + content_show).slideDown();
    });
});

Upvotes: 1

Related Questions