2015-11-07 3 views
5

Я хочу реализовать пользовательскую следующую кнопку в навигации на вкладке начальной загрузки.Bootstrap: следующая кнопка должна отображать следующую вкладку

При нажатии на следующую кнопку следующая вкладка должна отображаться как активная. Если последняя вкладка достигнута, она должна начинаться с первой вкладки.

Bootply snippet

ответ

3

Это решить вашу проблему

$('.next-tab').click(function(e){ 
    if($('.nav-tabs > .active').next('li').hasClass('next-tab')){ 
    $('.nav-tabs > li').first('li').find('a').trigger('click'); 
    }else{ 
    $('.nav-tabs > .active').next('li').find('a').trigger('click'); 
    } 
    e.preventDefault(); 
}); 

http://www.bootply.com/XYpxMIgink

0

Недавно я нуждался в этой функции, и это то, что я закончил с:

$('.change-tab').click(function() { 
 
    var $this = $(this); 
 
    var $nav = $($this.data('target')) 
 
    var $tabs = $nav.find('li'); 
 
    var $curTab = $tabs.filter('.active'); 
 
    var cur = $tabs.index($curTab); 
 
    if ($this.data('direction') == 'next') var $showTab = cur == $tabs.length - 1 ? $tabs.eq(0).find('a') : $tabs.eq(cur + 1).find('a'); 
 
    else var $showTab = cur == 0 ? $tabs.eq($tabs.length - 1).find('a') : $tabs.eq(cur - 1).find('a'); 
 
    $showTab.tab('show'); 
 
}); 
 

 

 

 
// normal tabs code 
 
$('#myTab a').click(function (e) { 
 
\t e.preventDefault(); 
 
\t $(this).tab('show'); 
 
}); 
 

 
$(function() { 
 
$('#myTab a:last').tab('show'); 
 
})
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <ul class="nav nav-tabs" id="myTab"> 
 
    <li class="active"><a href="#home">Home</a> 
 
    </li> 
 
    <li><a href="#profile">Profile</a> 
 
    </li> 
 
    <li><a href="#messages">Messages</a> 
 
    </li> 
 
    <li><a href="#settings">Settings</a> 
 
    </li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
    <div class="tab-pane active" id="home">Home content...</div> 
 
    <div class="tab-pane" id="profile">Content here...</div> 
 
    <div class="tab-pane" id="messages">Messages...</div> 
 
    <div class="tab-pane" id="settings">Settings...</div> 
 
    </div> 
 
</div> 
 

 

 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div class="btn-toolbar pull-right"> 
 
     <div class="btn-group"> 
 
     <button class="btn btn-default change-tab" data-direction="previous" data-target="#myTab"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Last</button> 
 
     <button class="btn btn-default change-tab" data-direction="next" data-target="#myTab">Next <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span> 
 
     </button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

+0

закладках не кликабельны больше здесь. – herrh

+0

@herrh Я не включил обычный код вкладки в свой пример, извините. Я добавил его выше, чтобы вы могли видеть, что он работает с обычным использованием – DelightedD0D

+0

. Спасибо за это решение – herrh

0

Я использую решение @ DelightedD0D. Когда загрузка страницы, управление всегда останавливается на последней вкладке. Если вы хотите, чтобы исправить это, пожалуйста, обновите следующую функцию

$(function() { 
$('#myTab a:last').tab('show'); 
}) 

в

$(function() { 
$('#myTab a:active').tab('show'); 
}) 
+0

с помощью кода @ DelightedD0D, как остановить его на последней вкладке? и предотвратить его возврат к последней вкладке при нажатии последней кнопки на первой вкладке? Есть идеи? –

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