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是对您的小提琴的更新，具有唯一的“id”值。

编辑 - 而here是将标签控件保持为每组选项卡元素的本地版本。

jQuery类选择器只选择带有类的第一个元素

1 个答案: