ブートストラップタブに「閉じる」ボタンを追加するコンテンツ

Question

ブートストラップタブのコンテンツに「閉じる」ボタンを追加する際に問題があります。ホバー上でタブを開閉するだけでなく、ユーザーがタブをクリックして閉じることができるようにボタンを追加する必要があります。

<!-- 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> 
... 

誰かがjsの部分で助けてくれますか？ブートストラップのドキュメントには何も見つかりませんでした。

Answer 1

jqueryの閉じるボタンを操作し、ボタンがクリックされたときにタブを非表示にしてCSSにスタイルを設定することができます。

あなたのCSSでこれを使用してタブを非表示にします。

.display_none{ 
    display: none !important; 
} 

jqueryコードでこれを使用してください。

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

この指示 enter link description here

編集のjQueryを参照してください。 JSは、以下のコードを入れて

Answer 2

それは非常に単純な男だけのアクティブなクラスを削除します -

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