to add a more descriptive/meaningful id name to a tab other
<p>I'd like to be able to add a more descriptive/meaningful id name to a tab other than #tab0 through to #tab3 etc. For this example I want to target the last tab with a URL of <code>http://domainName/tagetpage/#services</code>. Bear in mind I'd rather not use the jQuery UI tabs. This scrip allows me to bookmark a specific tab or link to a specific tab from another page. Thanks</p>

<p>here is my code:</p>

<pre class="lang-js prettyprint-override"><code>jQuery(document).ready(function(){


    $('#tabs').append('&lt;ul id="tabs"&gt;&lt;/ul&gt;')
    $('.tabs').each(function(i){
        // Gives element a unique ID -
        this.id = 'tab'+i;
        // If a title does not exist then use the ID for anchor text -
        var title = (this.title) ? this.title : this.id;
        // Define contents of link (to go within list items) -
        var link = '&lt;a href="#' + this.id + '"&gt;' + title + '&lt;/a&gt;';
        // Append list items to UL -
        $('&lt;li&gt;'+link+'&lt;/li&gt;').appendTo('#tabs ul');

        // Check if the URL contains an anchor
        var url = document.location.toString();
        if (url.match('#')) {
            // Get the name of the anchor used in the URL
            var anc = '#' + url.split('#')[1];
            // Hide all TABS -
            $('.tabs').hide();
            // Show the corresponding content
            $(anc).show();      
        } else {
            // Hide all Tabs except the first one -
            if(i===0) $('.tabs:not(#'+this.id+')').hide();
    }
    if (url.match('#')) {       

        // Get the name of the anchor used in the URL    
        var anc = '#' + url.split('#')[1];
        $('#tabs a[href='+anc+']').addClass("active"); }// &lt; ADD THIS LINE
    })

    $('#tabs a').click(function(){

        // get ID of tab to be shown -
        var id = '#'+this.href.split('#')[1];
        // Hide all TABS -
        $('.tabs').hide();
        // Show the tab which matches anchor's href -
        $(id).show();
        $('a').removeClass("active");
        $(this).addClass("active");
        // Don't forget to return false -
        //return false;
    })
   });
</code></pre>

<p></p>

<p>HTML</p>

<pre><code> &lt;section&gt;

 &lt;div class="tablist"&gt;
 &lt;div id="tabs"&gt;&lt;/div&gt;
 &lt;/div&gt;


 &lt;div class="tabs" title="Tab 1 title"&gt;
&lt;p&gt;content for tab 0&lt;/p&gt;
 &lt;/div&gt;

 &lt;div class="tabs" title="Tab 2 title"&gt;
&lt;p&gt;content for tab 1&lt;/p&gt;
 &lt;/div&gt;

 &lt;div class="tabs" title="Tab 2 title"&gt;
&lt;p&gt;Some cool content for the third tab&lt;/p&gt;
 &lt;/div&gt;
 &lt;div class="tabs" title="Services"&gt;
 &lt;h2&gt;Tab 4 &lt;/h2&gt;
 &lt;p&gt;content for tab 3&lt;/p&gt;
 &lt;/div&gt;
&lt;/section&gt;
</code></pre>
