jQuery Forum

Hello all, this may be a silly question but I have not been able to get the aria-selected portion to mark my JQuery UI tabs correctly when one is selected. I seem to be unable to get them to switch like its supposed to, and I'm not sure how the classes are added to my <li>'s when a tab is selected Could someone please shed some light on this? Here is my current HTML:

 

<div id="dvmenu" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
        @if (Session["User"] != null)
        {
        <ul role="tablist" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
            <li tabindex="0" role="tab" class="ui-state-default ui-corner-top" aria-controls="tabs-1" aria-selected="true">@Html.ActionLink("Home", "Overview", "Home", new { title="Home Page"}, null)            </li>

            <li tabindex="-1" role="tab" class="ui-state-default ui-corner-top" aria-controls="tabs-2" aria-selected="false">@Html.ActionLink("Achievements", "Index", "Achievements", new { title=""}, null)</li>

            <li tabindex="-1" role="tab" class="ui-state-default ui-corner-top" aria-controls="tabs-3" aria-selected="false">@Html.ActionLink("Rank", "Rank", "Rank", new { title="Rank" }, null)</li>

            <li tabindex="-1" role="tab" class="ui-state-default ui-corner-top" aria-controls="tabs-4" aria-selected="false">@Html.ActionLink("Goals", "Index", "Goals", new { title="Rank" }, null)</li>

        </ul>
            AchievementApp.Models.t_users user = (AchievementApp.Models.t_users)Session["User"];
            <h4 style="float:right">Welcome @user.user_name </h4>
        }

    </div>

 

Thanks for any help provided.