Jquery 用于重复标签

Question

我正在尝试在 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>

CSS代码

.tabsContainer{
    overflow:hidden;
}
.tabs-nav{
    overflow:hidden;
    margin:0;
    padding:0;
    list-style:none;
}
.tabs-nav li {
    display: inline-block;
    background: #34495E;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #34495E;
    margin-right: 5px;
}
.tabs-nav li a {
    display: block;
    padding: 10px 15px;
    font-weight: bold;
    color: #fff;
}
.tabs-nav li a.active {
    background: #FFF;
}

.tabs-nav li a.active {
    color: inherit;
}
.tabs-content {
    border: 1px solid #34495E;
    padding: 10px;
    background: #FFF;
    margin-top: -1px;
    overflow:hidden;
}
.tabs-content .tabs{
    overflow:hidden;
    display:none;
    margin:0 0 30px;
}
.tabs-content .tabs.active{
    display:block;
}

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');
            });
        }
    });
});

Answer 1

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

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

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

参见 JSFiddle 示例。

Answer 2

我想通了，在html中犯了一个菜鸟错误。在两个选项卡容器中，我都没有更改标签 href。在第一个选项卡容器中，它是#tab1、#tab2、#tab3。这与导致问题的第二个容器相同，选项卡编号应该不同。这就是标签无法正常工作的原因。

@Nanang Mahdaen El-Agu 谢谢你的代码，在你的帮助下我学到了一些新东西:)

Jquery 用于重复标签

Jquery for duplicate tabs

html

javascript

css

jquery

tabs