Question

在我提交错误报告之前，我想过要求帮助。我在另一个选项卡中有一个twitter bootstrap选项卡，如果我单击以更改到下一个内部选项卡，bootstrap.js不仅会从最近的.tab窗格中删除.active，还会从外部.tab窗格中删除.active。我试图深入研究代码，但我的javascript还不够完全理解它。我尝试使用jquery手动将活动类添加到外部.tab-pane，并在data-toggle =“tab”元素上尝试.tab（'show'）。似乎bootstrap.js找到所有 .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>

注意外部tab-pane是如何处于非活动状态的。

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

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>

欢呼任何建议！

Answer 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

Answer 2

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

Answer 3

问题是我没有使用内部选项卡中的链接，而只是使用了一个div（由于css原因必须这样做）。我不知道bootstrap需要链接是否在ul> li>格式。现在知道了！我会留下问题以防有人遇到同样的问题。干杯求救！

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

3 个答案: