"Schließen" -Schaltfläche zum Inhalt eines Bootstrap-Tabs hinzufügen

Question

Ich habe Probleme beim Hinzufügen eines "Schließen" -Buttons zum Inhalt des Bootstrap-Tabs. Die Registerkarten sollten nicht nur beim Hover geöffnet und geschlossen werden, sondern ich muss eine Schaltfläche hinzufügen, damit Benutzer auf die Registerkarte klicken und diese schließen können.

<!-- SIDE NAV --> 
    <div class="col-xs-3 hidden-xs"> 
     <div class="row"> 
      <nav class="side-nav"> 
       <ul class="nav nav-tabs" role="tablist"> 
        <li role="presentation" class="full-width"> 
         <a href="#accueil" aria-controls="accueil" role="tab" data-toggle="tab">TAB 1</a> 
        </li> 
        <li role="presentation" class="full-width"> 
         <a href="#connaitre-la-ccmv" aria-controls="connaitre-la-ccmv" role="tab" data-toggle="tab">TAB 2</a> 
        </li> 
       </ul> 
      </nav> 
     </div> 
    </div> 

    <!-- Tab panes --> 
     <div class="tab-content col-xs-9 hidden-xs"> 
      <div role="tabpanel" class="tab-pane row" id="accueil"> 
       <div class="col-xs-4"> 
        <h5 class="title-tab">TAB CONTENT 1</h5> 
        <ul class="list-tab"> 
         <li> 
          <a href="">Some text</a> 
         </li> 
         <li> 
          <a href="">Some other text</a> 
         </li> 
        </ul> 
       </div> 
       <div class="col-xs-12"> 
        <button type="button" class="close">X</button> 
       </div> 
      </div> 
     </div> 
... 

Kann jemand bitte mit dem js Teil helfen? Ich habe nichts darüber in der Bootstrap-Dokumentation gefunden ...

Answer 1

Sie können die Schließen-Schaltfläche in jquery bearbeiten und einen Stil in die CSS einfügen, indem Sie die Registerkarte ausblenden, wenn Sie auf die Schaltfläche klicken.

Verwenden Sie dies in Ihrem CSS, um die Registerkarte zu verbergen.

.display_none{ 
    display: none !important; 
} 

Verwenden Sie dies in Ihrem jquery-Code.

$('.close').click(function(){ 
    $('.tab-content').addClass('display_none'); 
}); 

zu dieser Anleitung Siehe enter link description here

Edited jQuery.

Answer 2

Es ist sehr einfach Mann nur aktive Klasse entfernen mit JS diesen Code unten setzen: -

$("button").click(function(){$("div").removeClass("active");});