將「關閉」按鈕添加到引導標籤內容

我在向我的引導標籤內容添加「關閉」按鈕時遇到問題。不僅應該懸停打開和關閉標籤，但我必須添加一個按鈕，以允許用戶點擊並關閉標籤。將「關閉」按鈕添加到引導標籤內容

<!-- 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部分？我還沒有在Bootstrap文檔中找到任何關於它的信息...

來源

2016-07-25 Amelie

-1

您可以操縱jquery中的關閉按鈕，並通過在單擊按鈕時隱藏選項卡來在CSS中放置樣式。

在你的css中使用這個來隱藏標籤。

.display_none{ 
    display: none !important; 
}

在你的jQuery代碼中使用它。

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

請參見本說明書 enter link description here

編輯的jQuery。

來源

2016-07-25 07:54:50

謝謝，它的工作。但是它帶來了另一個問題：由於標籤內容現在是「display：none」，除非我刷新，否則它不會在懸停時再次顯示。懸停時可以撤消「display：none」嗎？ – Amelie

你想要恢復顯示的按鈕是什麼？我的意思是有沒有任何按鈕可以恢復你的標籤？如果是這樣，只需重複上面的代碼並修改選擇器並將顯示更改爲display：inline！important; –

-3

它很簡單的人只是刪除活動類與JS把下面這段代碼： -

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

來源

2016-11-05 20:46:31

這將選擇頁面上的所有「div」元素並刪除活動類。它可能會對頁面上的其他元素產生意想不到的後果。 –

將「關閉」按鈕添加到引導標籤內容

回答

相關問題