twitter-bootstrap - Bootstrap 嵌套选项卡

Question

我是 bootstrap 的新手，无法正确创建嵌套选项卡，这是我目前拥有的: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;
}

Answer 1

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>

Bootstrap 3 demo

---

Bootstrap 4 demo