jQuery UI tabs, update url for dynamic tabs

Question

I am using jQuery UI dynamic tabs for my application. I want to update the URL hash value when a user clicks on a tab.

I found some solutions on SO such as link1 and link2 .

The solution that i tried is as follows:

Javascript:

$( "#tabs" ).tabs({
    select: function(event, ui) {                   
        window.location.hash = ui.tab.hash;

        if ( ui.index == 0) // its preloaded
                return;                               
    }
});

HTML:

<div id="tabs" > 
    <ul>
        <li><a href="#tabs-1"   > Tab 1  </a></li>
        <li><a href="Home/Test1"> Tab 2  </a></li>
        <li><a href="Home/Test2"> Tab 3  </a></li>            
    </ul>
    <div id="tabs-1">
        Some Text
    </div>
</div>

This solution takes the href value to update the URL. Thus for the first tab, URL hash becomes #tabs-1 . However for other tabs, URL hash are: #ui-tabs-1 and #ui-tabs-2 .

I want the url hash value to be #Employee instead of #ui-tabs-1 .

Any idea?

Answer 1

I tried several ways. The easiest way that I found is to add a name property to the anchor element. So, the HTML part is as follows.

<div id="tabs" > 
    <ul>
        <li><a href="#tabs-1"   > Tab 1  </a></li>
        <li><a name ="Employee" href="Home/Test1"> Tab 2  </a></li>
        <li><a name ="Address"  href="Home/Test2"> Tab 3  </a></li>            
    </ul>
    <div id="tabs-1">
        Some Text
    </div>
</div>

The javascript part will remain the same.