在jQuery的同一頁面上有多個標籤

我需要在同一頁面上有3個或4個相同的標籤。我得到了這個JQ代碼，它適用於一個選項卡，但是當我點擊其他選項卡時，第一個選項卡內容只會改變。

可有人請告訴我周圍的工作有這個實施。

這是使用

$(document).ready(function(){ 
$('ul.tabs').each(function(){ 
var $active, $content, $links = $(this).find('a'); 
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]); 
$active.addClass('active'); 
$content = $($active.attr('href')); 

$links.not($active).each(function() { 
    $($(this).attr('href')).hide();

代碼IM}）;

// Bind the click event handler 
     $(this).on('click', 'a', function(e){ 
    $active.removeClass('active'); 
    $content.hide(); 
    $active = $(this); 
    $content = $($(this).attr('href')); 
    $active.addClass('active'); 
    $content.show(); 
    e.preventDefault(); 
    }); 
});

}）;

這是HTML

<div class="bluetabs"> 
    <ul class='tabs'> 
    <li><a href='#tab1'>WEB DESIGN</a></li> 
    <li><a href='#tab2'>GRAPHIC DESIGN</a></li> 
    </ul> 
    <div class="bluetabContent"> 
     <div id='tab1'> 
     ... 
     </div> 
     <div id='tab2'> 
     ... 
     </div> 

    </div> 
</div><!-- BLUE TABS --> 

<div class="greentabs"> 
    <ul class='tabs'> 
    <li><a href='#tab1'>WEB DESIGN</a></li> 
    <li><a href='#tab2'>GRAPHIC DESIGN</a></li> 
    </ul> 
    <div class="bluetabContent"> 
     <div id='tab1'> 
     ... 
     </div> 
     <div id='tab2'> 
     ... 
     </div> 

    </div> 
</div><!-- GREEN TABS --> 

<div class="redtabs"> 
    <ul class='tabs'> 
    <li><a href='#tab1'>WEB DESIGN</a></li> 
    <li><a href='#tab2'>GRAPHIC DESIGN</a></li> 
    </ul> 
    <div class="bluetabContent"> 
     <div id='tab1'> 
     ... 
     </div> 
     <div id='tab2'> 
     ... 
     </div> 

    </div> 
</div><!-- RED TABS -->

來源

2013-07-04 Brian

的HTML丟失。請小提琴這裏：http://jsfiddle.net/ – algiecas

嗨更新與HTML - 感謝 – Brian

'ID ='tab1'' Id屬性應該是'UNIQUE'一個HTML文檔中 – sakhunzai

保持你的ID屬性HTML文檔e.g Ref獨特。

因此，在短期，改變你的標籤ID來TAB1，TAB2，TAB3和TAB4將解決這個問題。

來源

2013-07-04 11:46:02 sakhunzai

你可以在你jQuery的標籤，它可以用來multipe於一體，沒有獨特的類工作，可以爲所有的表中的同一類。 https://jqueryui.com/tabs/

檢查此並複製多個時間選項卡，但將ID更改爲類，也在jQuery中工作。

來源

2014-03-12 21:38:02 Dkouk

在jQuery的同一頁面上有多個標籤

回答

相關問題