Bootstrap tab.js 中的嵌套列表 [未删除活动 class]

Question

概览：

我想制作 tab-content 的两级导航和一级内容。这是我的代码：

<ul>
    <li>
        <a data-toggle="tab" href="#main">Main</a>
    </li>
    <li>
        <ul>
            <li>
                <a data-toggle="tab" href="#nested">Nested</a>
            </li>
        </ul>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="main">Main Content</div>
    <div class="tab-pane" id="nested">Nested Content</div>
</div>

当我执行以下步骤时它不起作用：

单击主要
单击嵌套
单击主要

详情：

最初一切正常，浏览器中的代码看起来与源代码相似。

当我点击 Main 时我开始工作

当我点击嵌套活动时 class 没有从第一个 li 中删除。

现在我可以点击任何东西而没有任何反应。

JSFiddle

https://jsfiddle.net/cvgd720s/

文档

http://getbootstrap.com/javascript/#tabs

Answer 1

我自己解决了这个问题添加脚本，删除任何 active class:

<script>

    (function(){

        var menu = document.getElementsByTagName("li")[0];
        var list = document.querySelectorAll("li");

        menu.addEventListener("click", function() {

            [].forEach.call(list, function(item) {
                item.classList.remove("active");
            });
        });

    })();

</script>

重要的是，该脚本应放在 jquery.js 和 bootstrap.js 之前。

Answer 2

您可以像这样嵌套子标签：

<div class="container">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      Home
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#nested1" aria-controls="home" role="tab" data-toggle="tab">Nested 1</a></li>
        <li role="presentation"><a href="#nested2" aria-controls="profile" role="tab" data-toggle="tab">Nested 2</a></li>
      </ul>
      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="nested1">Nested 1</div>
        <div role="tabpanel" class="tab-pane" id="nested2">Nested 2</div>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
    <div role="tabpanel" class="tab-pane" id="messages">Messages</div>
    <div role="tabpanel" class="tab-pane" id="settings">Settings</div>
  </div>
</div>

Bootstrap tab.js 中的嵌套列表 [未删除活动 class]

Nested list in Bootstrap tab.js [active class is not removed]

javascript

jquery

nested-lists

twitter-bootstrap

twitter-bootstrap-3

概览：

详情：

JSFiddle

文档

CODEPEN