Nested Tabs Bootstrap 3, Error : content remains same

Question

我正在使用 bootstrap-3 和 Jquery 制作嵌套选项卡，而我得到了一些 codepen 我得到了我想要的东西，但是在对代码进行了一些修改后我得到了一些不同的输出： 当我点击在第一个（主要）选项卡上，然后单击相关的子选项卡，我可以看到我的内容，但是在我单击与子选项卡相关的下一个选项卡之后。它同时显示旧点击选项卡和新点击选项卡的内容，而不是仅显示新内容。

这是我的代码笔 link : https://codepen.io/guenon/pen/WNwpxVK

这是原始代码笔 link : enter link description here

$('#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');
      }

    });

@import "compass/css3";

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="interest-tabs">
    <!--top level tabs-->
<!--   <li><a href="#all" data-toggle="tab">All</a></li> -->
  <li><a href="#class-six-th" data-toggle="tab">Class 6th</a></li>
  <li><a href="#class-seven-th" data-toggle="tab">Class 7th</a></li>
  <li><a href="#class-eight-th" data-toggle="tab">Class 8th</a></li>
  <li><a href="#class-nine-th" data-toggle="tab">Class 9th</a></li>
  <li><a href="#class-ten-th" data-toggle="tab">Class 10th</a></li>
  <li><a href="#class-eleventh" data-toggle="tab">Class 11th</a></li>
  <li><a href="#class-twelth" data-toggle="tab">Class 12th</a></li>
</ul>

<!--top level tab content-->
<div class="tab-content">
  
    <!--Class-6th tab menu-->
    <div id="class-six-th" class="tab-pane">
        <ul class="nav nav-tabs" id="class-six-th-tabs">
            <li><a href="#six-icse" data-toggle="tab">ICSE</a></li>
            <li><a href="#six-cbse" data-toggle="tab">CBSE</a></li>
            <li><a href="#six-ssc" data-toggle="tab">SSC</a></li>
        </ul>
    </div>
  
    <!--Class-7th tab menu-->
    <div id="class-seven-th" class="tab-pane">
        <ul class="nav nav-tabs" id="class-seven-th-tabs">
            <li><a href="#seven-icse" data-toggle="tab">ICSE</a></li>
            <li><a href="#seven-cbse" data-toggle="tab">CBSE</a></li>
            <li><a href="#seven-ssc" data-toggle="tab">SSC</a></li>
        </ul>
    </div>
  
    <!--Class-8th tab menu-->
    <div id="class-eight-th" class="tab-pane">
        <ul class="nav nav-tabs" id="class-eight-th-tabs">
            <li><a href="#eight-icse" data-toggle="tab">ICSE</a></li>
            <li><a href="#eight-cbse" data-toggle="tab">CBSE</a></li>
            <li><a href="#eight-ssc" data-toggle="tab">SSC</a></li>
        </ul>
    </div>
  
    <!--Class-9th tab menu-->
    <div id="class-nine-th" class="tab-pane">
        <ul class="nav nav-tabs" id="class-nine-th-tabs">
            <li><a href="#nine-icse" data-toggle="tab">ICSE</a></li>
            <li><a href="#nine-cbse" data-toggle="tab">CBSE</a></li>
            <li><a href="#nine-ssc" data-toggle="tab">SSC</a></li>
        </ul>
    </div>
  
    <!--Class-10th tab menu-->
    <div id="class-ten-th" class="tab-pane">
        <ul class="nav nav-tabs" id="class-ten-th-tabs">
            <li><a href="#ten-icse" data-toggle="tab">ICSE</a></li>
            <li><a href="#ten-cbse" data-toggle="tab">CBSE</a></li>
            <li><a href="#ten-ssc" data-toggle="tab">SSC</a></li>
        </ul>
    </div>
  
  <!--Class-11th tab menu-->
    <div id="class-eleventh" class="tab-pane">
        <ul class="nav nav-tabs" id="class-eleventh-tabs">
            <li><a href="#eleven-icse" data-toggle="tab">ICSE</a></li>
            <li><a href="#eleven-cbse" data-toggle="tab">CBSE</a></li>
            <li><a href="#eleven-ssc" data-toggle="tab">SSC</a></li>
        </ul>
    </div>
  
    <!--Class-12th tab menu-->
    <div id="class-twelth" class="tab-pane">
        <ul class="nav nav-tabs" id="class-twelth-tabs">
            <li><a href="#twelth-icse" data-toggle="tab">ICSE</a></li>
            <li><a href="#twelth-cbse" data-toggle="tab">CBSE</a></li>
            <li><a href="#twelth-ssc" data-toggle="tab">SSC</a></li>
        </ul>
    </div>
  
</div>

    <!--Class-6th tab content-->
    <div class="tab-content">
        <div id="six-icse" class="tab-pane">
            <i>6th ICSE interests go here</i>
        </div>
        <div id="six-cbse" class="tab-pane">
            <i>6th CBSE interests go here</i>
        </div>
        <div id="six-ssc" class="tab-pane">
            <i>6th SSC interests go here</i>
        </div>
        
    </div>

    <!--Class-7th tab content-->
    <div class="tab-content">
        <div id="seven-icse" class="tab-pane">
            <i>7th ICSE interests go here</i>
        </div>
        <div id="seven-cbse" class="tab-pane">
            <i>7th CBSE interests go here</i>
        </div>
        <div id="seven-ssc" class="tab-pane">
            <i>7th SSC interests go here</i>
        </div>
    </div>

    <!--Class-8th tab content-->
    <div class="tab-content">
        <div id="eight-icse" class="tab-pane">
            <i>eightth ICSE interests go here</i>
        </div>
        <div id="eight-cbse" class="tab-pane">
            <i>eightth CBSE interests go here</i>
        </div>
        <div id="eight-ssc" class="tab-pane">
            <i>eightth SSC interests go here</i>
        </div>
    </div>

    <!--Class-9th tab content-->
    <div class="tab-content">
        <div id="nine-icse" class="tab-pane">
            <i>nineth ICSE interests go here</i>
        </div>
        <div id="nine-cbse" class="tab-pane">
            <i>nineth CBSE interests go here</i>
        </div>
        <div id="nine-ssc" class="tab-pane">
            <i>nineth SSC interests go here</i>
        </div>
    </div>

    <!--Class-10th tab content-->
    <div class="tab-content">
        <div id="ten-icse" class="tab-pane">
            <i>tenth ICSE interests go here</i>
       
        </div>
        <div id="ten-cbse" class="tab-pane">
            <i>tenth CBSE interests go here</i>
        </div>
        <div id="ten-ssc" class="tab-pane">
            <i>tenth SSC interests go here</i>
        </div>
    </div>

    <!--Class-11th tab content-->
    <div class="tab-content">
        <div id="eleven-icse" class="tab-pane">
            <i>eleven ICSE interests go here</i>
        </div>
        <div id="eleven-cbse" class="tab-pane">
          <i>eleven CBSE interests go here</i>          
          
        </div>
        <div id="eleven-ssc" class="tab-pane">
            <i>eleven SSC interests go here</i>
        </div>
    </div>

    <!--Class-12th tab content-->
    <div class="tab-content">
        <div id="twelth-icse" class="tab-pane">
            <i>twelth ICSE interests go here</i>
        </div>
        <div id="twelth-cbse" class="tab-pane">
            <i>twelth CBSE interests go here</i>
        </div>
        <div id="twelth-ssc" class="tab-pane">
            <i>twelth SSC interests go here</i>
        </div>
    </div>
</div>

Answer 1

你只需要将 $('#interest_tabs') 更改为 $('#interest-tabs')

Nested Tabs Bootstrap 3, Error : content remains same

Nested Tabs Bootstrap 3, Error : content remains same

html

javascript

css

jquery

twitter-bootstrap-3