jQuery類選擇器僅選擇類的第一個元素

Question

下午。我正在爲這種情況而努力。

我在AnythingSlider幻燈片中有一個非常簡單的選項卡式內容。第一張幻燈片的標籤工作正常，但是，當我切換幻燈片標籤不會工作。

只有第一張幻燈片能夠正常工作，如果我更改了幻燈片並點擊了標籤，我可以在Chrome的開發人員工具上看到第一張幻燈片的標籤正在更改。

這是標籤腳本。

$(document).ready(function(){ 
     $('.top5tabs').css("display","block"); 
     $('.top5tabs div').hide(); 
     $('.top5tabs div:first').show(); 
     $('.top5tabs ul li:first').addClass('active'); 
      $('.top5tabs ul li a').click(function(){ 
      $('.top5tabs ul li').removeClass('active'); 
      $(this).parent().addClass('active'); 
      var currentTab = $(this).attr('href'); 
      $('.top5tabs div').hide('fast'); 
      $(currentTab).show('fast'); 
     return false; 
     }); 
    }); 

這是在每張幻燈片上重複的html。

<div class="top5tabs"> 

      <ul class="tabnav"> 

       <li><a href="#tab-1">option 1</a></li> 

       <li><a href="#tab-2">option 2</a></li> 

      </ul> 

      <div id="tab-1" class="tabdiv">content</div> 
      <div id="tab-2" class="tabdiv">content</div> 
</div> 

Answer 1

你的問題是，你正在嘗試爲頁面上的多個元素使用相同的「ID」值。你無法做到這一點，並期望工作。

當您需要多組選項卡時，可以切換到使用「class」值來標識要顯示的<div>元素，而不是「id」。

Here是具有唯一「ID」值的小提琴更新。

編輯 —和here是將選項卡控件保持爲每組選項卡元素的版本。