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

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 i works
时

• 当我点击嵌套活动类时，未从第一个li中删除。

• 现在我可以点击什么，没有任何反应。

的jsfiddle

  

https://jsfiddle.net/cvgd720s/

文档

  

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

Answer 1

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

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

的 CODEPEN

Answer 2

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

<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之前。