Question

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 http://domainName/tagetpage/#services. 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

here is my code:

jQuery(document).ready(function(){


    $('#tabs').append('<ul id="tabs"></ul>')
    $('.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 = '<a href="#' + this.id + '">' + title + '</a>';
        // Append list items to UL -
        $('<li>'+link+'</li>').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"); }// < 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;
    })
   });

HTML

 <section>

 <div class="tablist">
 <div id="tabs"></div>
 </div>


 <div class="tabs" title="Tab 1 title">
<p>content for tab 0</p>
 </div>

 <div class="tabs" title="Tab 2 title">
<p>content for tab 1</p>
 </div>

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

Answer 1

Use the title attribute to set IDs then. But be careful, all titles should be unique.

this.id = this.title ? this.title.toLowerCase().replace(/\s+/g, "_") : 'tab' + i;

It will make tab_2_title for Tab 2 title and services for Services.