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

Question

我有几行独立的jQuery Tabs。当另一个打开时，如何让分隔的标签关闭（所以最大值，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功能关闭上一个标签：

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

当用户在单个选项卡组中单击时，测试变量将返回相同的值，即leader1或两个leader2。当用户单击另一个选项卡组时，测试变量不匹配，之前的选项卡组将关闭。

Answer 2

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

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

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 -->