Bootstrap 嵌套选项卡
zum*_*sic 3 twitter-bootstrap twitter-bootstrap-3
我是引导程序新手，无法正确创建嵌套选项卡，这是我目前所拥有的： http: //codepen.io/anon/pen/gbYZrV
正如您所看到的，我正在尝试创建简单且非常流行的菜单示例：
我真的不确定我正在做的技术是否正确，也许有更简单的方法？我在 github 上找不到任何东西，怎么可能它从来没有为 bootstrap 创建？
我面临的问题 1. 内容不会显示（仅在鼠标单击后） 2. 如果您单击不同的链接，始终使第一个<li>处于活动状态+显示内容。
<ul class="nav nav-tabs" id="interest_tabs">
<!--top level tabs-->
<li class="active"><a href="#all" data-toggle="tab">All</a></li>
<li><a href="#brands" data-toggle="tab">Brands</a></li>
<li><a href="#media" data-toggle="tab">Media</a></li>
<li><a href="#music" data-toggle="tab">Music</a></li>
<li><a href="#public_figures" data-toggle="tab">Public Figures</a></li>
<li><a href="#sports" data-toggle="tab">Sports</a></li>
<li><a href="#tv_movies" data-toggle="tab">TV/Movies</a></li>
</ul>
<!--top level tab content-->
<div class="tab-content">
<!--all tab menu-->
<div id="all" class="tab-pane active">
<ul class="nav nav-tabs" id="all_tabs">
<li class="active"><a href="#all_popular" data-toggle="tab">PopularAll</a></li>
<li><a href="#all_unique" data-toggle="tab">UniqueAll</a></li>
</ul>
</div>
<!--brands tab menu-->
<div id="brands" class="tab-pane">
<ul class="nav nav-tabs" id="brands_tabs">
<li><a href="#brands_popular" data-toggle="tab">Popularbrands</a></li>
<li><a href="#brands_unique" data-toggle="tab">Uniquebrands</a></li>
</ul>
</div>
<!--media tab menu-->
<div id="media" class="tab-pane">
<ul class="nav nav-tabs" id="media_tabs">
<li><a href="#media_popular" data-toggle="tab">Popularmedia</a></li>
<li><a href="#media_unique" data-toggle="tab">Uniquemedia</a></li>
</ul>
</div>
<!--music tab menu-->
<div id="music" class="tab-pane">
<ul class="nav nav-tabs" id="music_tabs">
<li><a href="#music_popular" data-toggle="tab">Popularmusic</a></li>
<li><a href="#music_unique" data-toggle="tab">Uniquemusic</a></li>
</ul>
</div>
<!--public_figures tab menu-->
<div id="public_figures" class="tab-pane">
<ul class="nav nav-tabs" id="public_figures_tabs">
<li><a href="#public_figures_popular" data-toggle="tab">Popularfigures</a></li>
<li><a href="#public_figures_unique" data-toggle="tab">Uniquefigures</a></li>
</ul>
</div>
<!--sports tab menu-->
<div id="sports" class="tab-pane">
<ul class="nav nav-tabs" id="sports_tabs">
<li><a href="#sports_popular" data-toggle="tab">Popularsports</a></li>
<li><a href="#sports_unique" data-toggle="tab">Uniquesports</a></li>
</ul>
</div>
<!--tv/movies tab menu-->
<div id="tv_movies" class="tab-pane">
<ul class="nav nav-tabs" id="tv_movies_tabs">
<li><a href="#tv_movies_popular" data-toggle="tab">Popularmovies</a></li>
<li><a href="#tv_movies_unique" data-toggle="tab">Uniquemovies</a></li>
</ul>
</div>
</div>
<!--all tab content-->
<div class="tab-content">
<div id="all_popular" class="tab-pane">
<i>all_popular interests go here</i>
</div>
<div id="all_unique" class="tab-pane">
<i>all_unique interests go here</i>
</div>
</div>
<!--brands tab content-->
<div class="tab-content">
<div id="brands_popular" class="tab-pane">
<i>brands_popular interests go here</i>
</div>
<div id="brands_unique" class="tab-pane">
<i>brands_unique interests go here</i>
</div>
</div>
<!--media tab content-->
<div class="tab-content">
<div id="media_popular" class="tab-pane">
<i>media_popular interests go here</i>
</div>
<div id="media_unique" class="tab-pane">
<i>media_unique interests go here</i>
</div>
</div>
<!--music tab content-->
<div class="tab-content">
<div id="music_popular" class="tab-pane">
<i>music_popular interests go here</i>
</div>
<div id="music_unique" class="tab-pane">
<i>music_unique interests go here</i>
</div>
</div>
<!--public_figures tab content-->
<div class="tab-content">
<div id="public_figures_popular" class="tab-pane">
<i>public_figures_popular interests go here</i>
</div>
<div id="public_figures_unique" class="tab-pane">
<i>public_figures_unique interests go here</i>
</div>
</div>
<!--sports tab content-->
<div class="tab-content">
<div id="sports_popular" class="tab-pane">
<i>sports_popular interests go here</i>
</div>
<div id="sports_unique" class="tab-pane">
<i>sports_unique interests go here</i>
</div>
</div>
<!--tv_movies tab content-->
<div class="tab-content">
<div id="tv_movies_popular" class="tab-pane">
<i>tv_movies_popular interests go here</i>
</div>
<div id="tv_movies_unique" class="tab-pane">
<i>tv_movies_unique interests go here</i>
</div>
</div>
</div>
JS：
$('#interest_tabs').on('click', 'a[data-toggle="tab"]', function(e) {
e.preventDefault();
var $link = $(this);
if (!$link.parent().hasClass('active')) {
//remove active class from other tab-panes
$('.tab-content:not(.' + $link.attr('href').replace('#','') + ') .tab-pane').removeClass('active');
// click first submenu tab for active section
$('a[href="' + $link.attr('href') + '_all"][data-toggle="tab"]').click();
// activate tab-pane for active section
$('.tab-content.' + $link.attr('href').replace('#','') + ' .tab-pane:first').addClass('active');
}
});
CSS：
//style second tab menu differently
.tab-content li.active a, .tab-content li.active a:hover {
border: 0px;
box-shadow: inset 0 -3px 0 #323b43;
}
.tab-content li a:hover {
box-shadow: inset 0 -3px #ced7df;
}
2018 年更新为 Bootstrap 4.0.0
您需要将子选项卡和内容嵌套在父选项卡内容中，如下所示......
<div class="tabbable boxed parentTabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#set1">All</a>
</li>
<li><a href="#set2">Brands</a>
</li>
<li><a href="#media">Media</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="set1">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#sub11">PopularAll</a>
</li>
<li><a href="#sub12">UniqueAll</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="sub11">
<p>pop all content</p>
</div>
<div class="tab-pane fade" id="sub12">
<p>unique all content</p>
</div>
</div>
</div>
</div>
...
</div>
</div>