jQuery选项卡 - 选项卡内存

Question

我有以下代码来记住最后选择的标签。然而，它根本不起作用。我是jQuery的新手，所以我不确定我做错了什么。

它出了什么问题？我没有收到任何错误消息。

//Default Action
$(document).ready(function() {
    var currentIndex = $.cookie("currentTab");
    // set current tab
    if (currentIndex > 0)
    {
        $(".tab_content").hide();
        $("ul.tabs li:".currentIndex).addClass("active").show();
        $(".tab_content:".currentIndex).show();
    }
    else
    {
        $(".tab_content").hide();
        $("ul.tabs li:nth-child(2)").addClass("active").show();
        $(".tab_content:nth-child(2)").show();
    }

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        if ($.browser.msie)
        { $(activeTab).show(); }
        else
        { $(activeTab).fadeIn(); }
        return false;

        // set cookie
        var cookieValue = $(this).find("a").attr("rel");
        $.cookie("currentTab", cookieValue, { expires: 7 });
    });
});

<div class="Tabs">
    <ul class="tabs">
        <li><a href="#Roles" rel="0">USER ROLES</a></li>
        <li><a href="#User-Details" rel="1">USER INFO</a></li>
        <li><a href="#User-Profile" rel="2">PROFILE</a></li>
        <li><a href="#Change-Password" rel="3">PASSWORD</a></li>
    </ul>
    <div class="tab_container">
        <div id="Roles" class="tab_content">

        </div>
        <div id="User-Details" class="tab_content">

        </div>
        <div id="User-Profile" class="tab_content">

        </div>
        <div id="Change-Password" class="tab_content">

        </div>
    </div>
</div>

Answer 1

你应该在这里收到错误，这个：

$("ul.tabs li:".currentIndex).addClass("active").show();
$(".tab_content:".currentIndex).show();

应该是：

$("ul.tabs li:eq("+currentIndex+")").addClass("active").show();
$(".tab_content:eq("+currentIndex+")").show();

此部分还需要之前你的return命令退出点击处理程序：

// set cookie
var cookieValue = $(this).find("a").attr("rel");
$.cookie("currentTab", cookieValue, { expires: 7 });

---

总的来说，我会重新构建它以使用您的click处理程序，如下所示：

$(function() {
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();

        var activeTab = $(this).find("a").attr("href");
        if ($.support.opacity) $(activeTab).fadeIn();
        else $(activeTab).show();

        $.cookie("currentTab", $(this).find("a").attr("rel"), { expires: 7 });

        return false;
    });

    $(".tab_content").hide();
    $("ul.tabs li:eq(" + ($.cookie("currentTab") || 1) + ")").click();
});

You can test it out here。请注意使用$.support进行淡入淡出而不是浏览器检测，这样可以更好地长期工作（例如：IE9）。