Bootstrap nav-tabs dropdown-menü mehrspaltig

Question

Ich versuche ein bootstrap mehrspaltiges Dropdown-Menü für Nav-Tabs zu erstellen. Mit dem unten stehenden Code kann ich jede Registerkarte auswählen. Wenn ich zu einer anderen Registerkarte wechsle, kann ich nicht zur vorherigen Registerkarte zurückkehren. Es sieht so aus, als ob alle Tabs aktiv bleiben. Wie kann ich das beheben?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<style> 
.dropdown-menu.multi-column { 
     width: 400px; 
} 

.dropdown-menu.multi-column .dropdown-menu { 
     display: block !important; 
     position: static !important; 
     margin: 0 !important; 
     border: none !important; 
     box-shadow: none !important; 
     min-width:100px; 
} 
</style> 

    <ul class="nav nav-tabs" id="myTabs" role="tablist"> 
     <li role="presentation" class="active"><a href="#main" id="main-tab" role="tab" data-toggle="tab" aria-controls="main" aria-expanded="false">Summary Table</a></li> 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">States</a> 
      <div class="dropdown-menu multi-column"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <ul class="dropdown-menu"> 
          <li><a href="#Alabama" role="tab" id="Alabama-tab" data-toggle="tab">Alabama</a></li> 
          <li><a href="#Alaska" role="tab" id="Alaska-tab" data-toggle="tab">Alaska</a></li> 
         </ul> 
        </div> 
        <div class="col-md-6"> 
         <ul class="dropdown-menu"> 
          <li><a href="#Maine" role="tab" id="Maine-tab" data-toggle="tab">Maine</a></li> 
          <li><a href="#Maryland" role="tab" id="Maryland-tab" data-toggle="tab">Maryland</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </li> 
    </ul> 

    <div class="tab-content" id="myTabContent" style="color:black"> 
     <div class="tab-pane fade in active" role="tabpanel" id="main" aria-labelledby="main-tab"> 
      <table class="table table-striped table-hover table-bordered table-responsive" id="rates"> 
       <thead> 
        <tr><th>State</th><th>Tax Rate</th></tr> 
       </thead> 
       <tbody> 
        <tr><td id="AL">Alabama</td><td id="AL_T">6.00%</td></tr> 
        <tr><td id="AK">Alaska</td><td id="AK_T">2.70%</td></tr> 

        <tr><td id="ME">Maine</td><td id="ME_T">3.00%</td></tr> 
        <tr><td id="MD">Maryland</td><td id="MD_T">3.00%</td></tr> 

       </tbody> 
      </table><br/> 
     </div> 

     <div class="tab-pane fade in" role="tabpanel" id="Alabama" aria-labelledby="Alabama-tab"> 
     <h5><span style="text-decoration: underline;">Alabama </span></h5> 
     </div> 

     <div class="tab-pane fade in" role="tabpanel" id="Alaska" aria-labelledby="Alaska-tab"> 
     <h5><span style="text-decoration: underline;">Alaska </span></h5> 
     </div> 

     <div class="tab-pane fade in" role="tabpanel" id="Maine" aria-labelledby="Maine-tab"> 
     <h5><span style="text-decoration: underline;">Maine </span></h5> 
     </div> 

     <div class="tab-pane fade in" role="tabpanel" id="Maryland" aria-labelledby="Maryland-tab"> 
     <h5><span style="text-decoration: underline;">Maryland </span></h5> 
     </div> 

    </div> 

Answer 1

Die Antwort von @Filipe Amaral war 95% von dem, was dieses Problem benötigt. Nach ein paar Modifikationen funktioniert es wie ein Zauber.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
      $('.dropdown-menu li').click (function(){ 
      $('.dropdown-menu li').removeClass('active') 

     }); 
     $('#main-tab').click (function(){ 
      $('.dropdown-menu li').removeClass('active') 

     }); 
    }); 
     $(function() { 

     var active = $('a[data-toggle="tab"]').parents('.active').length; 
     var tabClicked = false; 

     // Closes current active tab (toggle and pane): 
     var close = function() { 
      $('a[data-toggle="tab"]').parent().removeClass('active'); 
      $('.tab-pane.active').removeClass('active'); 

      active = null; 
     } 


     // Closing active tab when clicking on toggle: 
     $('[data-toggle=tab]').click(function(){ 
      if ($(this).parent().hasClass('active')){ 
       $($(this).attr("href")).toggleClass('active'); 

       active = null; 
      } else { 
       tabClicked = true; 
       active = this; 
      } 
     }); 

     // Closing active tab when clicking outside tab context (toggle and pane): 
     $(document).on('click.bs.tab.data-api', function(event) { 
      if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) { 
       close(); 
      } 

      tabClicked = false; 
     }); 

     // Closing active tab on ESC key release: 
     $(document).keyup(function(e){ 
      if(active && e.keyCode === 27) { // ESC 
       close(); 
      } 
     }); 
    }); 

     </script> 

<style> 
.dropdown-menu.multi-column { 
     width: 400px; 
} 

.dropdown-menu.multi-column .dropdown-menu { 
     display: block !important; 
     position: static !important; 
     margin: 0 !important; 
     border: none !important; 
     box-shadow: none !important; 
     min-width:100px; 
} 
</style> 

    <ul class="nav nav-tabs" id="myTabs" role="tablist"> 
     <li role="presentation" class="active"><a href="#main" id="main-tab" role="tab" data-toggle="tab" aria-controls="main" aria-expanded="false">Summary Table</a></li> 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">States</a> 
      <div class="dropdown-menu multi-column"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <ul class="dropdown-menu"> 
          <li><a href="#Alabama" role="tab" id="Alabama-tab" data-toggle="tab">Alabama</a></li> 
          <li><a href="#Alaska" role="tab" id="Alaska-tab" data-toggle="tab">Alaska</a></li> 
         </ul> 
        </div> 
        <div class="col-md-6"> 
         <ul class="dropdown-menu"> 
          <li><a href="#Maine" role="tab" id="Maine-tab" data-toggle="tab">Maine</a></li> 
          <li><a href="#Maryland" role="tab" id="Maryland-tab" data-toggle="tab">Maryland</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </li> 
    </ul> 

    <div class="tab-content" id="myTabContent" style="color:black"> 
     <div class="tab-pane fade in active" role="tabpanel" id="main" aria-labelledby="main-tab"> 
      <table class="table table-striped table-hover table-bordered table-responsive" id="rates"> 
       <thead> 
        <tr><th>State</th><th>Tax Rate</th></tr> 
       </thead> 
       <tbody> 
        <tr><td id="AL">Alabama</td><td id="AL_T">6.00%</td></tr> 
        <tr><td id="AK">Alaska</td><td id="AK_T">2.70%</td></tr> 

        <tr><td id="ME">Maine</td><td id="ME_T">3.00%</td></tr> 
        <tr><td id="MD">Maryland</td><td id="MD_T">3.00%</td></tr> 

       </tbody> 
      </table><br/> 
     </div> 

     <div class="tab-pane fade in" role="tabpanel" id="Alabama" aria-labelledby="Alabama-tab"> 
     <h5><span style="text-decoration: underline;">Alabama </span></h5> 
     </div> 

     <div class="tab-pane fade in" role="tabpanel" id="Alaska" aria-labelledby="Alaska-tab"> 
     <h5><span style="text-decoration: underline;">Alaska </span></h5> 
     </div> 

     <div class="tab-pane fade in" role="tabpanel" id="Maine" aria-labelledby="Maine-tab"> 
     <h5><span style="text-decoration: underline;">Maine </span></h5> 
     </div> 

     <div class="tab-pane fade in" role="tabpanel" id="Maryland" aria-labelledby="Maryland-tab"> 
     <h5><span style="text-decoration: underline;">Maryland </span></h5> 
     </div> 

    </div> 

Answer 2

Fügen Sie diese auf dem Boden

<script type="text/javascript"> 
     $(function() { 

     var active = $('a[data-toggle="tab"]').parents('.active').length; 
     var tabClicked = false; 

     // Closes current active tab (toggle and pane): 
     var close = function() { 
      $('a[data-toggle="tab"]').parent().removeClass('active'); 
      $('.tab-pane.active').removeClass('active'); 
      active = null; 
     } 

     // Closing active tab when clicking on toggle: 
     $('[data-toggle=tab]').click(function(){ 
      if ($(this).parent().hasClass('active')){ 
       $($(this).attr("href")).toggleClass('active'); 
       active = null; 
      } else { 
       tabClicked = true; 
       active = this; 
      } 
     }); 

     // Closing active tab when clicking outside tab context (toggle and pane): 
     $(document).on('click.bs.tab.data-api', function(event) { 
      if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) { 
       close(); 
      } 

      tabClicked = false; 
     }); 

     // Closing active tab on ESC key release: 
     $(document).keyup(function(e){ 
      if(active && e.keyCode === 27) { // ESC 
       close(); 
      } 
     }); 
    }); 

     </script> 

Und eine Taste vor dem letzten </div>

<a href="#" class="btn btn-primary">Close active tab</a> 

Ich weiß, dass nicht die beste Lösung ist, aber macht die Arbeit und Mit ein wenig Geduld können Sie es besser machen.