页面上的多个 jQuery UI 选项卡：打开另一个选项卡时关闭所有其他选项卡

Question

我有几行单独的 jQuery 选项卡。如何在打开另一个选项卡时关闭单独的选项卡（因此在页面上的任何给定时间最多打开 1 个）：

标记：

<!-- First Leadership Row -->
<div id="leadershipTabs1" class="leadershipTabs leadershipContentContainer contentContainer clearfix">
    <ul>
        <li><a href="#leader1-slug">Leader 1 Tab Link</a></li>
        <li><a href="#leader2-slug">Leader 2 Tab Link</a></li>
        <li><a href="#leader3-slug">Leader 3 Tab Link</a></li>
        <li><a href="#leader4-slug">Leader 4 Tab Link</a></li>
    </ul>

    <div id="leader1-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent"><!-- Leader 1 Content Here --></div>
    </div>

    <div id="leader2-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent"><!-- Leader 2 Content Here --></div>
    </div>

    <div id="leader3-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent"><!-- Leader 3 Content Here --></div>
    </div>

    <div id="leader4-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent"><!-- Leader 4 Content Here --></div>
    </div>

</div><!-- #leadershipTabs -->
<!-- #First Leadership Row -->

<!-- Second Leadership Row -->
<div id="leadershipTabs2" class="leadershipTabs leadershipContentContainer contentContainer clearfix">
    <ul>
        <li><a href="#leader5-slug">Leader 5 Tab Link</a></li>
        <li><a href="#leader6-slug">Leader 6 Tab Link</a></li>
        <li><a href="#leader7-slug">Leader 7 Tab Link</a></li>
        <li><a href="#leader8-slug">Leader 8 Tab Link</a></li>
    </ul>


    <div id="leader5-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent"><!-- Leader 5 Content Here --></div>
    </div>

    <div id="leader6-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent"><!-- Leader 6 Content Here --></div>
    </div>

    <div id="leader7-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent"><!-- Leader 7 Content Here --></div>
    </div>

    <div id="leader8-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent"><!-- Leader 8 Content Here --></div>
    </div>

</div><!-- #leadershipTabs -->
<!-- #Second Leadership Row -->

触发 jQuery 选项卡：

jQuery('.leadershipTabs').tabs({
    active: false,
    collapsible: true 
});

Answer 1

感谢 oMiKeY 为我指明了正确的方向。但是，当我运行上面的示例时，它并不完全正常。例如：单击Leader 1，然后单击Leader 5，然后再次单击Leader 1。不幸的是，Leader 1 吃掉了点击并没有显示它的内容，因为它不知道它的内容是使用 css 隐藏的，jquery 认为它仍然存在。

首先我稍微更改了类命名结构，因此相关元素：标签组<div id>、<li> 锚点和面板<div id> 都以leader1 或leader2 开头。

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="leader1Tabs" class="leadershipTabs leadershipContentContainer contentContainer clearfix">
<ul>
    <li id="anchor1"><a href="#leader1-1">Leader 1</a>
    </li>
    <li id="anchor2"><a href="#leader1-2">Leader 2</a>
    </li>
    <li id="anchor3"><a href="#leader1-3">Leader 3</a>
    </li>
    <li id="anchor4"><a href="#leader1-4">Leader 4</a>
    </li>
</ul>
<div id="leader1-1" class="leaderPod">
    <div class="leaderPodContent ctrContent">
    </div>
</div>
<div id="leader1-2" class="leaderPod">
    <div class="leaderPodContent ctrContent">
    </div>
</div>
<div id="leader1-3" class="leaderPod">
    <div class="leaderPodContent ctrContent">
    </div>
</div>
<div id="leader1-4" class="leaderPod">
    <div class="leaderPodContent ctrContent">
    </div>
</div>
</div>

<div id="leader2Tabs" class="leadershipTabs leadershipContentContainer contentContainer clearfix">
<ul>
    <li id="anchor5"><a href="#leader2-5">Leader 5</a>
    </li>
    <li id="anchor6"><a href="#leader2-6">Leader 6</a>
    </li>
    <li id="anchor7"><a href="#leader2-7">Leader 7</a>
    </li>
    <li id="anchor8"><a href="#leader2-8">Leader 8</a>
    </li>
</ul>
<div id="leader2-5" class="leaderPod">
    <div class="leaderPodContent ctrContent">
    </div>
</div>
<div id="leader2-6" class="leaderPod">
    <div class="leaderPodContent ctrContent">
    </div>
</div>
<div id="leader2-7" class="leaderPod">
    <div class="leaderPodContent ctrContent">
    </div>
</div>
<div id="leader2-8" class="leaderPod">
    <div class="leaderPodContent ctrContent">
    </div>
</div>
</div>

然后使用jquery-ui自带的tabs功能关闭上一个tab：

    var hold; //the previous active tab
    var dom; //the current active tab
    $('li').click(function () {
        dom = $(this).find('a').attr('href');  //example results are #leader1-1 or #leader2-5
        dom = dom.substring(1,8);  //use substring to return only 'leader1' or 'leader2'
        if ((hold == undefined)){  //for the first tab click
            hold = dom;  //to set the previous active tab
        }else if(dom !== hold){  //on all subsequent clicks, close the previous active tab
            $('#'+hold).tabs({active:false});  //jquery-ui tabs function
            hold = dom;  //update the previous tab
        }
    });

当用户在单个选项卡组中单击时，测试变量都将返回相同的结果，无论是领导者 1 还是领导者 2。当用户点击另一个标签组时，测试变量不匹配，前一个标签组被关闭。

Answer 2

我能找到的唯一问题是您没有在

中包含链接

标签。这些链接的 href 必须与您在下面创建的 div 的 id 相匹配。例如：

jQuery('.leadershipTabs').tabs({
    active: false,
    collapsible: true
});

$('li').click(function () {
    var dom = $(this).find('a').attr('href');
    $('.leaderPod').not(dom).hide();
    $('.ui-tabs-active').not(this).removeClass('ui-tabs-active');
    $('.ui-state-active').not(this).removeClass('ui-state-active');
    document.getElementById($(this).attr('id')).scrollIntoView(true);
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="leadershipTabs1" class="leadershipTabs leadershipContentContainer contentContainer clearfix">
    <ul>
        <li id="anchor1"><a href="#leader1-slug">Leader 1</a>
        </li>
        <li id="anchor2"><a href="#leader2-slug">Leader 2</a>
        </li>
        <li id="anchor3"><a href="#leader3-slug">Leader 3</a>
        </li>
        <li id="anchor4"><a href="#leader4-slug">Leader 4</a>
        </li>
    </ul>
    <div id="leader1-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent">
        </div>
    </div>
    <div id="leader2-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent">
        </div>
    </div>
    <div id="leader3-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent">
        </div>
    </div>
    <div id="leader4-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent">
        </div>
    </div>
</div>
<!-- #leadershipTabs -->
<!-- #First Leadership Row -->
<!-- Second Leadership Row -->
<div id="leadershipTabs2" class="leadershipTabs leadershipContentContainer contentContainer clearfix">
    <ul>
        <li id="anchor5"><a href="#leader5-slug">Leader 5</a>
        </li>
        <li id="anchor6"><a href="#leader6-slug">Leader 6</a>
        </li>
        <li id="anchor7"><a href="#leader7-slug">Leader 7</a>
        </li>
        <li id="anchor8"><a href="#leader8-slug">Leader 8</a>
        </li>
    </ul>
    <div id="leader5-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent">
        </div>
    </div>
    <div id="leader6-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent">
        </div>
    </div>
    <div id="leader7-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent">
        </div>
    </div>
    <div id="leader8-slug" class="leaderPod">
        <div class="leaderPodContent ctrContent">
        </div>
    </div>
</div>
<!-- #leadershipTabs -->
<!-- #Second Leadership Row -->