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

我在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>

來源

2011-07-06 Ivand

似乎在這裏工作：http://jsfiddle.net/b62Gq/你可以上網頁本身？ – kei

它確實爲1個元素工作，但是當在同一頁面中有多個選項卡時，它不會工作 – Ivand

請參閱此處。 http://jsfiddle.net/b62Gq/1/ – Ivand

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

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

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

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

來源

2011-07-06 22:50:56 Pointy

謝謝！這解決了其中一個問題。但是，第二組選項卡上的內容仍然隱藏。它應該顯示在加載時間 – Ivand

這是因爲「：第一」並不意味着，「該組中的第一個」;它意味着，「第一個匹配的總體選擇器。」我會在小提琴上工作，並在一秒鐘內更新答案。 – Pointy

我通常是這樣想的：use class =「」用於你想要在幾個不同的地方使用的東西，使用id =「」來表示一些獨特的東西。 – Mattis

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

回答

相關問題