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是将选项卡控件保持为每组选项卡元素的版本。