jQuery logo

I made a simple HTML page with JQuery UI tabs. But the customer asked to give URLs for each tab. I was a bit surprised with it, because I remember only how to make default tab on page load. You can do it with the syntax like this:

$("#tabs").tabs( { selected: x  });

 where 'x' is integer index of tab. So, the task was to determine which tab is requested.

I got the collection of tab links (a href='#') and got the values of its links. Also I parsed the URL and got the 'hash' value of URL. Hash has the value after '#'. After that I looked for whether the string of hash is contained in href attributes.

There are two parts of the code - Javascript and HTML. At first, Javascript:

<script>
$(document).ready(function () {
                var selectedTab = 0;
                var mytabs = $('#tabs ul li a').each(function(x, obj) {

                              if(obj.hash.indexOf(location.hash) != -1 && location.hash != '') {
                                               selectedTab = x;
                               }
                });
                $("#tabs").tabs( { selected: selectedTab  });      
});
</script>

The second part - HTML code - looks very coomon.

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Title of tab 1</a></li>
        <li><a href="#tabs-2">Title of tab 2</a></li>
        <li><a href="#tabs-3">Title of tab 3</a></li>
    </ul>
    <div id="tabs-1">
                Text for tab-1
 </div>

    <div id="tabs-2">
          Text for tab-2
    </div>
    <div id="tabs-3">
       Text for tab-3
     </div>
</div>