jquery - 在同一页面中创建 2 个不同的选项卡

Question

请看一下这个fiddle并让我知道如何更新代码以具有 2 个不同的选项卡，这样当用户单击“学生搜索第一个”选项卡时，仪表板选项卡保持事件状态。

下面是我用来激活/显示/隐藏标签的代码

 $(function () {
        $('ul.tabs li:first').addClass('active');
        $('.block article').hide();
        $('.block article:first').show();
        $('ul.tabs li').on('click', function () {
            $('ul.tabs li').removeClass('active');
            $(this).addClass('active')
            $('.block article').hide();
            var activeTab = $(this).find('a').attr('href');
            $(activeTab).show();
            return false;
        });
    });

谢谢

Answer 1

http://jsfiddle.net/20psbpdj/9/

$(function () {
    $('ul.tabs li:first').addClass('active');
    $('.block article').hide();

    $('.block article:first-child').show();

    $('ul.tabs li').on('click', function () {

        $(this).parents('.panel').find('ul.tabs li').removeClass('active');

        $(this).addClass('active');

        $(this).parents('.panel').find('.block article').hide();
        var activeTab = $(this).find('a').attr('href');
        $(activeTab).show();
        return false;
        });
    });

此外，添加 $('.block article:first-child').show();加载后显示第二个 block 的第一个选项卡。

编辑:更新了两个面板的事件选项卡。