jQuery tabs won't mark current selected index

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?

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");
     }
});