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

Posted 2023-05-08

【中文标题】嵌套选项卡 Bootstrap 3，错误：内容保持不变

【英文标题】：Nested Tabs Bootstrap 3, Error : content remains same

【发布时间】：2020-12-14 08:45:25

【问题描述】：

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

这是我的 codepen 链接：https://codepen.io/guenon/pen/WNwpxVK

这里是原始的 codepen 链接：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>  

【问题讨论】：

这个问题似乎是由一个错字引起的：$('#interest_tabs') 没有选择id="interest-tabs"

@showdev 解决了这个问题。我得到了不同的错误，我把这段代码放到我的网站上，但它不再工作了..

【参考方案1】：

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

【讨论】：

谢谢，我是盲人..现在它可以工作了，但我遇到了不同的问题。