2016-07-25 5 views
1

У меня возникли проблемы с добавлением кнопки «закрыть» к содержимому вкладки Bootstrap. Мало того, что вкладки открываются и закрываются при наведении, но я должен добавить кнопку, чтобы пользователи могли щелкнуть и закрыть вкладку.Добавить кнопку «закрыть» на вкладке загрузочной вкладки

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

ответ

-1

Вы можете манипулировать кнопкой закрытия в jquery и поместить в нее стиль в css, сокрыв вкладку при нажатии кнопки.

используйте это в своем CSS, чтобы скрыть вкладку.

.display_none{ 
    display: none !important; 
} 

Используйте это в своем jquery-коде.

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

Обратитесь к данной инструкции enter link description here

Edited JQuery.

+0

Спасибо, это сработало. Но это создало еще одну проблему:/поскольку вкладка-содержимое теперь отображается «display: none», она не будет отображаться снова при наведении, если я не обновляюсь. Могу ли я отменить «отображение: нет» при наведении? – Amelie

+1

Какую кнопку вы хотите восстановить дисплей? Я имею в виду, есть ли кнопка, которая может восстановить вашу вкладку? если это так, просто повторите приведенный выше код и измените селектор и измените отображение на дисплей: inline! important; –

-3

Это очень простой человек, просто удалить активный класс с JS поставить этот код ниже: -

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

это выберет все элементы «div» на странице и удалит активный класс. Это может иметь непреднамеренные последствия для других элементов на странице. –

Смежные вопросы