Question

I have noticed is that when I click every tab its value is not consistent – why?

I want to get the index of the tab ‘Sign out’. What should I do to make it consistent?

Here’s my jQuery code:

$(function() {
    $('#tabs').tabs();
    $( "#tabs" ).bind( "tabsselect", function(event, ui) {
        var selected = $("#tabs").tabs('option', 'selected');
        alert(selected);
    });
});

Here’s my HTML code:

<div id="tabs" class="login-tabs">
    <ul>
        <li><a href="#Home">Home</a></li>
        <li><a href="#Profile">Profile</a></li>
        <li><a href="#Messages">Messages</a></li>
        <li><a href="#Notifications">Notifications</a></li>
        <li><a href="#Find">Find Friends</a></li>
        <li><a href="#Signout">Sign out</a></li>
    </ul>
    <div id="Home">

    </div>
    <div id="Profile">

    </div>
    <div id="Messages">

    </div>
    <div id="Notifications">

    </div>
    <div id="Find">

    </div>
</div>

Answer 1

var index = $('#tabs ul').index($('#tabs a[href="#Signout"]'));

if($('#tabs a[href="#Signout"]').parent('li').hasClass('ui-tabs-selected'))
    //signout tab selected