Bootstrap Multi-Level-Menü und Tab-Panels

Question

Ich habe dieses Multi-Level-Menü, das eine Registerkarte Bootstrap, ähnlich wie ein TabControl in C# betreibt.

Ich habe Schwierigkeiten damit, da die Menüpunkte nicht abgewählt werden, wenn ein neues ausgewählt wird und das Element dann nicht erneut ausgewählt werden kann.
Es zu diesem Beitrag ähnelt: Bootstrap 4: dropdown tab items can only be selected once

ich die Abhilfe versucht und es funktioniert nicht, in der Tat, es wird nie ausgelöst. Ich weiß nicht, was ich falsch mache.

Dies wird hier auf thie Code basiert: https://codepen.io/wizly/pen/BlKxo

hier ein Stift ist das Verhalten zeigt: https://codepen.io/anon/pen/eGRrpx

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="/Home/Index">Home</a></li> 
       <li> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">CNP<b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#CNPAU" data-toggle="tab">CNPAU</a></li> 
         <li><a href="#CNPPAC" data-toggle="tab">CNPPA</a></li> 
         <li><a href="#CNPCH" data-toggle="tab">CNPCH</a></li> 
         <li><a href="#CNPV" data-toggle="tab">CNPV</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Set<b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#SetCB" data-toggle="tab">CB</a></li> 
         <li><a href="#SetRCB" data-toggle="tab">RCB</a></li> 
         <li><a href="#SetRCUB" data-toggle="tab">RCUB</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
</div> 
<div id="exTab1" class="container"> 
    <div class="row"> 
    <div id="tabs" class="col-md-12"> 
     <ul class="nav nav-pills hide"> 
     <li class="active"> 
      <a href="#CNPAU" data-toggle="tab">CNPAU</a> 
     </li> 
     <li> 
      <a href="#CNPPPAC" data-toggle="tab">CNPPPAC</a> 
     </li> 
     <li> 
      <a href="#CNPCH" data-toggle="tab">CNPCH</a> 
     </li> 
     <li> 
      <a href="#CNPV" data-toggle="tab">CNPV</a> 
     </li> 
     <li> 
      <a href="#SetCB" data-toggle="tab">SetCB</a> 
     </li> 
     <li> 
      <a href="#SetRRCB" data-toggle="tab">SetRRCB</a> 
     </li> 
     <li> 
      <a href="#SetRRCUB" data-toggle="tab">SetRRCUB</a> 
     </li> 
     </ul> 
     <div class="tab-content"> 
     <div class="row">&nbsp;</div> 
     <div class="tab-pane" id="CNPAU"> 
      <div class="row">&nbsp;</div> 
      <h3>CNPAU</h3> 
     </div> 
     <div class="tab-pane" id="CNPPPAC"> 
      <div class="row">&nbsp;</div> 
      <h3>CNPPPAC</h3> 
     </div> 
     <div class="tab-pane" id="CNPCH"> 
      <div class="row">&nbsp;</div> 
      <h3>CNPCH</h3> 
     </div> 
     <div class="tab-pane" id="CNPV"> 
      <div class="row">&nbsp;</div> 
      <h3>CNPV</h3> 
     </div> 
     <div class="tab-pane" id="SetCB"> 
      <div class="row">&nbsp;</div> 
      <h3>SetCB</h3> 
     </div> 
     <div class="tab-pane" id="SetRRCB"> 
      <div class="row">&nbsp;</div> 
      <h3>SetRRCB</h3> 
     </div> 
     <div class="tab-pane" id="SetRRCUB"> 
      <div class="row">&nbsp;</div> 
      <h3>SetRRCUB</h3> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Nicht sicher, ob es der richtige Weg ist, aber das behebt das Problem:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    // gets activated tab 
    var target = $(e.target).attr("href"); 
    // remove active from all other menu items 
    $(".nav li").removeClass("active"); 
    // set active for current menu item 
    $('a[href="' + target + '"]').parent('li').addClass('active'); 
});