页面上的多个 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

我能发现的唯一问题是您没有在

标签内包含链接。这些链接的 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 -->

Answer 2

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

首先，我稍微更改了 class 命名结构，因此相关元素：选项卡组 <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>

然后使用built-in 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
        }
    });

当用户在单个选项卡组中单击时，测试变量将返回相同的结果，都是 leader1 或都是 leader2。当用户点击另一个选项卡组时，测试变量不匹配，前一个选项卡组被关闭。

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

Multiple jQuery UI Tabs on Page: Close all other tabs when another is opened

jquery

tabs

jquery-ui

jquery-ui-tabs

jquery-tabs