0
Я новичок в самонастройках, имеющие проблемы при создании вложенных вкладок прямо, вот что у меня есть на данный момент: http://codepen.io/anon/pen/gbYZrVBootstrap Вложенных Вкладки
Как вы можете видеть, что я пытаюсь создать простой и очень популярный пример меню: 
Я действительно не уверен, что я делаю, это правильная техника, может быть, там что-то проще? Я не могу найти что-либо на github, как это возможно, он никогда не был создан для начальной загрузки?
Проблемы, с которыми я сталкиваюсь 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;
}
одно слово: LOGIC! Благодаря! – zumbamusic