data-toggle= "tab", активация второй вкладки при загрузке страницы

Я знаю, что этот вопрос уже задан, я прошел через предыдущие вопросы, но почему-то ничего не сработало для меня, поэтому я подумал, что должен опубликовать это.

Я хочу выделить вторую вкладку при загрузке страницы, и когда нажата определенная кнопка, Я хочу выделить первую вкладку.

установка класса как "панель вкладок активна" для второй вкладки не работает. 

<ul class="nav nav-tabs">
    <li><a href="#search" data-toggle="tab">Search</a></li>
    <li><a href="#home" data-toggle="tab">User Details</a></li>
    <li><a href="#info" data-toggle="tab">More Info</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="search">...Content...</div>
    <div class="tab-pane active" id="home">...Content...</div>
    <div class="tab-pane" id="info">...Content...</div>
</div>
6
jquery tabs twitter-bootstrap

1 ответов

у вас есть активный класс на панели 2-й вкладки, показывая, что первоначально, но не на фактической вкладке li. Таким образом, вы видите содержимое вторых вкладок, но не выбранное состояние на вкладке. Вам нужно изменить:

<li><a href="#home" data-toggle="tab">User Details</a></li>

до

<li class="active"><a href="#home" data-toggle="tab">User Details</a></li>

и выбрать вкладки с помощью jQuery:

// To select the first tab
$('.nav-tabs li:first-child a').tab('show'); 
// To select the second tab
$('.nav-tabs li:eq(1) a').tab('show');

вы можете использовать это при загрузке страницы, если хотите (в $(document).ready() или что бы вы ни использовали), хотя, вероятно, лучше всего исправить разметку. Вы можете использовать его в вашем случае слушателя для кнопки.

см. этот пример:http://www.bootply.com/kkmcecadLb

10