Javascript 重复选项卡的Jquery

我正在尝试在jquery中创建选项卡，并且已经成功了。然而，有一个问题我无法解决，那就是重复标签

对于单个选项卡，jquery可以正常工作，但当我复制并粘贴该选项卡时，它不能正常工作。我确实添加了一些额外的代码，通过使用最近的函数来查找当前使用的选项卡，但仍然没有结果

看看代码

//HTML

<div class="tabsContainer">
    <ul class="tabs-nav">
        <li>
            <a href="#tab1" class="active">Tab One</a>
        </li>

        <li>
            <a href="#tab2">Tab Two</a>
        </li>

        <li>
            <a href="#tab3">Tab Three</a>
        </li>
    </ul>
    <section class="tabs-content">
       <div class="tabs active" id="tab1">
            This is tab 1<br />
            This is tab 1<br />
            This is tab 1<br />
        </div>

        <div class="tabs" id="tab2">
            This is tab 2<br />
            This is tab 2<br />
            This is tab 2<br />
        </div>

        <div class="tabs" id="tab3">
            This is tab 3<br />
            This is tab 3<br />
            This is tab 3<br />
        </div>
    </section>
</div>


//2nd tab
<div class="tabsContainer">
    <ul class="tabs-nav">
        <li>
            <a href="#tab1" class="active">Tab One</a>
        </li>

        <li>
            <a href="#tab2">Tab Two</a>
        </li>

        <li>
            <a href="#tab3">Tab Three</a>
        </li>
    </ul>
    <section class="tabs-content">
        <div class="tabs active" id="tab1">
            This is tab 1<br />
            This is tab 1<br />
            This is tab 1<br />
        </div>

        <div class="tabs" id="tab2">
            This is tab 2<br />
            This is tab 2<br />
            This is tab 2<br />
        </div>

        <div class="tabs" id="tab3">
            This is tab 3<br />
            This is tab 3<br />
            This is tab 3<br />
        </div>

    </section>
</div>

JAVAScript

$(function() {

    //listeing for click events
    $('.tabsContainer .tabs-nav li a').on('click', function(){

        //if more than 1 tab find out which tab you are currently in using the closest function
        //by clicking on the a tag it will find which container it is a part of.
        var $tab = $(this).closest('.tabsContainer'); 

        $tab.find('.tabs-nav li a.active').removeClass('active');
        $(this).addClass('active');
        //grabbing the tab which is clicked using the attribute "href"
        var currentClick = $(this).attr('href');

        //hiding the current panel
        //using a call back function. What this does is wait for the slideup to finish and then it will excute the call back function
        $tab.find('.tabs-content .tabs.active').slideUp(300, nextTab);

        //the call back function to show the new tab
        function nextTab(){
            $(this).removeClass('active');
            $(currentClick).slideDown(300, function(){
                $(this).addClass('active');
            });
        }
    });
});

您的

$（当前单击）

将选择从

主体开始的元素，因为您没有指定父范围。因此，如果
currentClick
值为
#tab1
，则选择结果来自第一个选项卡，而不是来自当前
a
父项

我更喜欢将选项卡处理包装到每个选项卡范围。例如：

$('.tabContainer').each(function() {
    var tab = $(this);
    // Do the tab processing here.
});

查看示例。
我解决了问题，在html中犯了一个新手错误。在这两个标签容器中，我没有更改标签href。在第一个选项卡容器中，它是#tab1、#tab2、#tab3。这与导致问题的第二个容器相同，选项卡编号应不同。这就是为什么标签不能正常工作的原因

@Nanang Mahdaen El Agu感谢您的代码，在您的帮助下，我学到了一些新东西：）

$('.tabContainer').each(function() {
    var tab = $(this);
    // Do the tab processing here.
});