多个 jQuery 个标签页

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

我的问题是我需要能够在同一页面上有多个选项卡。所以我试着这样做。我试过只更改 class 名称，但它仍然不能 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 个标签页

multiple jQuery tabs

jquery

tabs