Bootstrap 2.1 javascript嵌套选项卡：内部选项卡关闭外部选项卡

Posted 2023-05-08

【中文标题】Bootstrap 2.1 javascript嵌套选项卡：内部选项卡关闭外部选项卡

【英文标题】：Bootstrap 2.1 javascript nested tabs: inner tab closes outer tab

【发布时间】：2012-09-07 02:44:15

【问题描述】：

我以为在提交错误报告之前我会向 SO 寻求帮助。我在另一个选项卡中有一个 twitter 引导选项卡，然后我单击以更改为下一个内部选项卡，bootstrap.js 不仅从最近的 .tab-pane 中删除 .active ，而且还从外部 .tab-pane 中删除。我试图深入研究代码，但我的 javascript 还不足以完全理解它。我尝试使用 jquery 手动将活动类添加到外部 .tab-pane，并且还尝试了 data-toggle="tab" 元素上的 .tab('show') 。似乎 bootstrap.js 找到 all .tab-content ，然后从其子项中删除 .active 。或者我的标记可能有错误（根据经验，99% 的时间都是人为错误）。 javascript 都是样板文件，我只是用 tab('show') 调用第一个选项卡。这是我的标记：

<ul id="sidebar" class="unstyled naviTab">
    <li class="accordion-group">...</li>
    <li class="accordion-group active">
        <h2 id="module1-title1" class="module-header" href="#getting-started" data-toggle="tab" data-original-title="">...</h2>
    </li>
</ul>
...
...
<ul class="unstyled tab-content">
    <li id="course" class="tab-pane">
    <li id="getting-started" class="tab-pane active">
        <div class="wizard stepTab">
            <a class="active" href="#module1-step1" data-toggle="tab">1.Step</a>
            <a class="" href="#module1-step2" data-toggle="tab">2.Step</a>
            <a class="" href="#module1-step3" data-toggle="tab">3.Step</a>
        </div>
        <ul class="links unstyled tab-content">
            <li id="module1-step1" class="tab-pane active" data-original-title="">...</li>
            <li id="module1-step2" class="tab-pane">
            <li id="module1-step3" class="tab-pane">
        </ul>
    </li>
</ul>

然后点击一个 href="#module1-step2":

<ul id="sidebar" class="unstyled naviTab">
    <li class="accordion-group">...</li>
    <li class="accordion-group active">
        <h2 id="module1-title1" class="module-header" href="#getting-started" data-toggle="tab" data-original-title="">...</h2>
    </li>
</ul>
...
...
<ul class="unstyled tab-content">
    <li id="course" class="tab-pane">
    <li id="getting-started" class="tab-pane">
        <div class="wizard stepTab">
            <a class="" href="#module1-step1" data-toggle="tab">1.Step</a>
            <a class="active" href="#module1-step2" data-toggle="tab">2.Step</a>
            <a class="" href="#module1-step3" data-toggle="tab">3.Step</a>
        </div>
        <ul class="links unstyled tab-content">
            <li id="module1-step1" class="tab-pane" data-original-title="">...</li>
            <li id="module1-step2" class="tab-pane active">
            <li id="module1-step3" class="tab-pane">
        </ul>
    </li>
</ul>

注意外部选项卡窗格是如何全部处于非活动状态的。

如果有人遇到过这个问题或者可以告诉我我在哪里搞砸了，我将非常感激！

EDIT1 这是我的javascript。我实际上不必包含任何 js，因为 bootstrap.js 与 html 属性一起工作得很好（这可能是它中断的原因）。我尝试了不同的方法（.each()、e.preventDefault()），但似乎没有任何效果。但无论如何，这是我的 js：

<script>
/*global $*/
"use strict";
$(function () 
    $('.naviTab li:first-child h1').tab('show');  //shows the first child of the outer tab on load. Could just add an .active to the markup instead
    $('#sidebar li:first-child').addClass('active');  //this is for the accordion that the outer tab links are enbedded in
    $('.stepTab a').click(function () 
        if ($(this).closest('li').hasClass('active') == false)   //this is supposed to check if the outer tab has .active and add it if it doesn't. Unfortunately it doesn't work...
            $(this).closest('li').addClass('active');
        
        $(this).siblings().removeClass('active');  //this is for css styling purposes on the inner tab a's
        $(this).addClass('active');
    );
);
</script>

为任何建议干杯！

【问题讨论】：

你能发布你的 Javascript 吗？也许您同时选择了这两个元素...

我更新了帖子并包含了js。即使我不包含任何 js 并且只是在标记中手动设置第一个外部选项卡上的活动，它的工作原理也是一样的。我试图停止默认行为的尝试也没有奏效。我的猜测是引导程序有一个错误，当它从选项卡窗格中删除 .active 时会查找所有选项卡内容。

恐怕你发现了一个错误。我已经嵌套了文档中的选项卡，问题仍然存在。看一看：jsfiddle.net/simbirsk/RS4Xh/1

你是对的！这是一个稍微不同的设置和一个稍微不同的错误（在这种情况下，外部选项卡没有设置为停用，而是内部选项卡不会切换到下一个选项卡，然后如果你想返回就会中断。我会为两者提交错误报告！

我的 jsfiddle 出现错误，更改 id 可以正常工作：jsfiddle.net/simbirsk/RS4Xh/2

【参考方案1】：

正如 albertedevigo 所说，您只需为每个选项卡提供唯一的 ID，无论选项卡是否嵌套，这是因为 javascript 操作将打开/关闭此特定选项卡：

<div class="tabbable">
<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
        <p>Howdy, I'm in Section 2.</p>
        <div class="tabbable">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab3" data-toggle="tab">Section 3</a></li>
                <li><a href="#tab4" data-toggle="tab">Section 4</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab3">
                    <p>I'm in Section 3.</p>
                </div>
                <div class="tab-pane" id="tab4">
                    <p>Howdy, I'm in Section 4.</p>
                </div>
            </div>
        </div>
    </div>
</div>

看看jsfiddle.net/simbirsk/RS4Xh/2

【参考方案2】：

也许这应该有助于http://www.juvenpajares.com/?p=204 使用引导框架的自定义手风琴

【参考方案3】：

问题是我没有为内部选项卡中的链接使用 an，而只是一个带有 a 的 div（出于 css 原因必须这样做）。我不知道引导程序要求链接采用 ul > li > a 格式。现在它知道了！如果有人有同样的问题，我会留下这个问题。为帮助干杯！