嵌套选项卡 Bootstrap 3，错误：内容保持不变

Question

I'm using bootstrap-3 with Jquery to making Nested Tabs while I got some codepen stuff there I got what I wanted, but after some modification in a code I got some different Outputs : when I clicked on first (primary) tab and then clicking on related sub-tab I able to see my content, but after I click on next tab with respect to sub-tabs. Its showing both content of older clicked tab and newer clicked tab, instead of only new content.

here is my codepen link : https://codepen.io/guenon/pen/WNwpxVK

here is original codepen 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')