提问人：Daniel 提问时间：11/17/2016 最后编辑：CommunityDaniel 更新时间：11/17/2016 访问量：660
Bootstrap tab.js 中的嵌套列表 [活动类未删除]
Nested list in Bootstrap tab.js [active class is not removed]
问：
概述：
我想用一个级别的内容进行两级导航。这是我的代码：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 工作时
- 当我单击嵌套活动类时，不会从第一个中删除。
li
- 现在我可以点击任何东西，什么也没发生。
JSFiddle
文档
答：
0赞
Daniel
11/17/2016
#1
我自己解决了这个问题，添加了删除任何类的脚本：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.jsbootstrap.js
1赞
max
11/17/2016
#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>
密码笔
评论
0赞
Daniel
11/17/2016
您的代码效果很好。我不准确，描述我想有一个级别的内容，所以它不能应用于我的情况，但感谢您的努力。
上一个：筛选多级列表
下一个：jQuery 目标嵌套列表
评论