Utilizing jQuery UI dynamic tabs in my application requires updating the URL hash value when a user clicks on a tab.
After researching solutions on SO, like link1 and link2, I attempted the following approach:
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 script updates the URL based on the href value of each tab. However, it results in URl hashes like #ui-tabs-1 and #ui-tabs-2 instead of #Employee.
Anyone have a solution for this issue?