Селектор класса 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»..

Здесь - это обновление вашей скрипки с уникальными значениями "id".

edit - и здесь isверсия, в которой элемент управления вкладками является локальным для каждой группы элементов с вкладками.