0

＃tab0から＃tab3など以外のタブに、よりわかりやすく意味のあるID名を追加できるようにしたいと思います。この例では、URLが。の最後のタブをターゲットにしますhttp://domainName/tagetpage/#services。jQueryUIタブは使用したくないことを覚えておいてください。このスクリプトを使用すると、特定のタブをブックマークしたり、別のページから特定のタブにリンクしたりできます。ありがとう

これが私のコードです：

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>
4

2 に答える 2

0

次に、属性を使用してtitleID を設定します。ただし、すべてtitleの s が一意である必要があることに注意してください。

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

それは と のためにtab_2_titleなりTab 2 titleます。servicesServices

于 2012-05-13T11:19:17.870 に答える
0

要素の位置を使用できる一意のIDについてはまだ考えています：それはVisioNsの回答+ iです

this.id = this.title ? this.title.toLowerCase().replace(/\s+/g, "_") + '_' + i : 'tab' + i;
于 2012-05-13T13:43:24.200 に答える