用于页面刷新的选项卡上的 jQuery cookie

Question

我的标签是这样的：

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

如何在其中实现 jQuery cookie 插件，以便在页面刷新后显示“当前”选项卡？

Answer 1

所以我根据选项卡的 id 执行此操作，但是如果您愿意，您可以根据索引执行相同操作：

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

Answer 2

我认为您不需要 jQuery cookie 插件来实现这一点。

如果您尝试在哈希中设置当前选项卡的索引会怎样：

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