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”值。您不能这样做并期望某些东西起作用。

当您需要多组选项卡时，您可以切换到使用“类”值来标识要显示的 <div> 元素而不是“id”。

Here 是您的 fiddle 的更新，具有唯一的“id”值。

edit — 而here 是将标签控件保持在每组标签元素本地的版本。