jQuery tabs won't mark current selected index

Question

I'm using jQuery UI tabs for a project with the AJAX approach. When you select and option from the listed tabs the content gets changed but the current tab stays the same.

Here's my js code:

 $('#tabs').tabs({
                select: function (event, ui) {
                    var url = $.data(ui.tab, 'load.tabs');
                    if (url) {
                        location.href = url;
                        return false;
                    }
                    return true;
                }
            });

And here's my HTML:

<div id="tabs">
            <ul>
                <li>
                    <%= Html.TabLink("Inicio", "Dashboard","List") %></li>
                <li>
                    <%= Html.TabLink("Mis Listas", "Index", "List")%></li>
                <li>
                    <%= Html.TabLink("Mis Amigos", "FriendDetail", "List")%></li>
                <li>
                    <%= Html.TabLink("Invitar", "Invite","List") %></li>
            </ul>
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        </div>

Am I missing something?

Answer 1

Returning false is halting the remainder of the code necessary to switch to the tab you've selected. If you're attempting to stop the user from redirecting and simply showing a new URL, use window.location.replace()

e.g.

$('#tabs').tabs({
     select: function (event, ui) {
          var url = $.data(ui.tab, 'load.tabs');
          if (url) 
               window.location.replace("asdadf");
     }
});