How do I include the id of a Jquery UI Tab in the url?

Question

I have three tabs on a page called Main.aspx . I want it so that when the user first accesses Main.aspx , the url changes to the default tab and when a different tab is clicked, the url changes to refer to the id of that tab. So for example, if they click Second Tab , I want the url to be Main.aspx#secondTab . That way, if they refresh the page, it will remain on the current tab.

How would I accomplish this?

<div id="everyNavigationTabID" class="everyNavigationTabClass">
 <ul class="singleTabNavigationClass">
                <li><a href="#firstTab">First Tab</a></li>
                <li><a href="#secondTab">Second Tab</a></li>
                <li><a href="#thirdTab">Third Tab</a></li>
            </ul>    
<div id="firstTab" class="tabContent">
                First Tab
 </div>
 <div id="secondTab" class="tabContent">
                Second Tab
 </div>
 <div id="thirdTab" class="tabContent">
                Third Tab
 </div>

Answer 1

You can use the document.location.hash property to add # fragments to your current URL.

Something like -

$("div.tabContent").on('click',function(evt){
   document.location.href = document.location.href + "#" + $(this).attr('id');
   evt.preventDefault();
});

Then on your $(function() (document.ready) function you can examine the document.location.hash variable and take appropriate actions.