Question

I have the following code to remember the last selected tab. It is, however, not working at all. I am very new at jQuery, so I’m not sure what I’m doing wrong.

What’s wrong with it? I’m not getting any error messages.

//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

You should be getting an error here, this:

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

Should be:

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

Also this part needs to comes before your return command which exits your click handler:

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

---

Overall, I’d restructure it to use your click handler, like this:

$(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. Note the use of $.support for the fade instead of browser detection, this will work better long-term (for example: IE9).