Question

我有一个使用jQuery的标签的工作示例

http://jsfiddle.net/barrycorrigan/gs8mp9kz/

使用以下代码

$(document).ready(function(){
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    });
});

我的问题是我需要能够在同一页面上有多个标签。所以我试着这样做。我尝试过更改类名，但它仍然不能100％工作，而且代码编写得不好。

$(document).ready(function(){

    $('ul.tabs-fixtures li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs-fixtures li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    });

    $('ul.tabs-media li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs-media li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    });

});

任何人都可以帮助我更好地写这个并让它适用于多个标签吗？

Answer 1

您可以引入容器元素

<div class="tab-ct">
    <ul class="tabs">
        <li class="tab-link current" data-tab="next-game">Tab 1</li>
        <li class="tab-link" data-tab="table">Tab 2</li>
        <li class="tab-link" data-tab="last-game">Tab 3</li>
    </ul>
    <div id="next-game" class="tab-content current">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div id="table" class="tab-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div id="last-game" class="tab-content">
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

然后

$(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab'), $ct = $(this).closest('.tab-ct');

        $ct.find('ul.tabs li.current').removeClass('current');
        $ct.find('.tab-content.current').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    });

});

演示：Fiddle

多个jQuery选项卡

1 个答案: