bootstrap mulitple nav вкладки для содержимого вкладки

Question

im пытаюсь создать тип разбивки на страницы для закладки начальной загрузки, я понял, что простой подход состоял бы в создании двух навигационных вкладок с html, а затем попытаться создать второй навигатор, чтобы выглядеть как карусель нумерацией страниц. Однако у im в настоящее время возникают проблемы с попыткой реализовать его, чтобы обе навигационные вкладки работали вместе. Поскольку я не могу это сделать, если я нажму на одну вкладку, то появится другая.

Here is my Fiddle Однако я не могу заставить его работать правильно.

<div> 

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

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

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

, что я в основном хочу добиться того, что верхние и нижнего нав СЧ закладок системы будут автоматически обновлять (с классом активным) в зависимости от содержания выбранного. Будет ли это достигнуто с помощью javascript?

Answer 1

Когда вы нажимаете на вкладку, записывайте значение href. Затем выберите все навигационные вкладки с соответствующим href и установите их в активное состояние. Это приведет к тому, что верхний и нижний навигаторы будут синхронизироваться друг с другом независимо от того, какой из них вы нажимаете. Наконец, установите соответствующую вкладку в активную.

Updated JSFIDDLE

$('.nav-tabs li a').click(function (e) {  
    //get selected href 
    var href = $(this).attr('href');  

    //set all nav tabs to inactive 
    $('.nav-tabs li').removeClass('active'); 

    //get all nav tabs matching the href and set to active 
    $('.nav-tabs li a[href="'+href+'"]').closest('li').addClass('active'); 

    //active tab 
    $('.tab-pane').removeClass('active'); 
    $('.tab-pane'+href).addClass('active'); 
}) 

Answer 2

Я обнаружил, что при использовании эффекта замирания (т.е. class="fade"), ответ на @Brino не будет применяться переход к выцветанию. После прочтения кода начальной загрузки и документации я обнаружил, что я могу вызвать $().tab('show) в теге привязки, и все вкладки будут соответствующим образом обновляться. См. Следующий фрагмент кода.

$('.nav-tabs li a').click(function (e) {  
 
    //get selected href 
 
    var href = $(this).attr('href'); 
 
    
 
    // show tab for all tabs that match href 
 
    $('.nav-tabs li a[href="' + href + '"]').tab('show'); 
 
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div> 
 
    <!-- Nav tabs --> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
     <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a> 
 

 
     </li> 
 
     <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a> 
 

 
     </li> 
 
     <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a> 
 

 
     </li> 
 
     <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a> 
 

 
     </li> 
 
    </ul> 
 
    <!-- Tab panes --> 
 
    <div class="tab-content"> 
 
     <div role="tabpanel" class="tab-pane fade in active" id="home">1</div> 
 
     <div role="tabpanel" class="tab-pane fade" id="profile">2</div> 
 
     <div role="tabpanel" class="tab-pane fade" id="messages">3</div> 
 
     <div role="tabpanel" class="tab-pane fade" id="settings">4</div> 
 
    </div> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
     <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a> 
 

 
     </li> 
 
     <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a> 
 

 
     </li> 
 
     <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a> 
 

 
     </li> 
 
     <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a> 
 

 
     </li> 
 
    </ul> 
 
</div>