Bootstrap: il prossimo pulsante dovrebbe mostrare la prossima scheda

Question

Voglio implementare un pulsante successivo personalizzato nella navigazione della scheda di bootstrap.

Quando si fa clic sul pulsante successivo, la scheda successiva deve essere visualizzata come attiva. Se viene raggiunta l'ultima scheda, dovrebbe iniziare con la prima scheda.

Bootply snippet

Answer 1

Questo risolve il problema

$('.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

Answer 2

recente ho bisogno di questa funzionalità e questo è ciò che ho finito con:

$('.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>

Answer 3

Sto utilizzando la soluzione fornita da @ DelightedD0D. Quando la pagina si carica, il controllo si ferma sempre sull'ultima scheda. Se si vuole risolvere il problema, si prega di aggiornare la seguente funzione

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

a

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