Close Bootstrap 4 tab pane

Я пытаюсь открыть/закрыть панель вкладок Bootstrap 4 после нажатия на ссылку закладки. В основном создается эффект переключения с каждой областью вкладок. Конечный продукт представляет собой вертикальную навигацию по боковой панели, где вы можете открывать/закрывать каждую панель вкладок.Close Bootstrap 4 tab pane

<ul class="nav nav-tabs" role="tablist"> 
    <li class="nav-item"> 
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a> 
    </li> 
</ul> 

<!-- Tab panes --> 
<div class="tab-content"> 
    <div class="tab-pane active" id="home" role="tabpanel">...</div> 
    <div class="tab-pane" id="profile" role="tabpanel">...</div> 
    <div class="tab-pane" id="messages" role="tabpanel">...</div> 
    <div class="tab-pane" id="settings" role="tabpanel">...</div> 
</div> 


$(".nav-link.active").click(function(){ 
    $(this).find('.tab-pane').removeClass('active'); 
});

Пример: http://codepen.io/anycircle/pen/dNMPrW

источник

2017-01-11 user3063628

Ты код выглядит это прямо из документации Bootstrap и JQuery не действительно ничего не сделать. – ZimSystem

Вы пытаетесь скрыть вкладку после щелчка заголовка во второй раз? Исходя из вашего jquery, похоже, что вы хотите удалить активный класс, когда элемент навигации нажат, пока он уже активен. Это верно? –

Yea HTML прямо из документа, потому что моя разметка является точной (плюс некоторые пользовательские классы только для стилизации). – user3063628

Если вы пытаетесь скрыть активные .tab-pane данные после того, как нав нажата второй раз, когда вы можете обновить ваш Jquery к чему-то вроде этого:

$(".nav-link").click(function(){ 
    if ($(this).hasClass('active')){ 
     $('#' + this.hash.substr(1).toLowerCase()).toggleClass('active'); 
    } 
});

И здесь приводится код этой работы: http://codepen.io/egerrard/pen/dNMyry

источник

2017-01-11 18:28:43

Спасибо, это работает, только после того, как вы закрываете панель, вы должны иметь возможность переключать ту же самую панель назад. – user3063628

@ user3063628 Обновлен ответ и код для использования '.toggleClass()', который должен решить вашу проблему. –

Все еще не работает для меня. Я создал ручку, чтобы показать свою разметку. http://codepen.io/anycircle/pen/dNMPrW – user3063628

<ul class="nav nav-tabs "> 
     <li class=" nav-item "> <a class="nav-link active" href="#One" data-target="#One" data-toggle="tab"> One </a> </li> 
     <li class="nav-item"><a class="nav-link" href="#Two" data-target="#Two" data-toggle="tab"> Two </a> <li> 
    </ul> 
    <div class="tab-content clearfix"> 
    <div class="tab-pane fade in active" id="One"> 
    This is one 
    </div> 
    <div class="tab-pane fade " id="Two"> 
    This is Two 
    </div> 
    </div>

источник

2017-03-04 11:54:13

Пожалуйста, приложите некоторый текст, описывающий ваш код, что облегчает работу OP и сообщества. –

ответ

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