Elaine Byene Elaine Byene - 6 months ago 35
jQuery Question

Next-Previous button to work in loop using Bootstrap Tab

Currently "Previous" Button doesn't work in the first tab since it's not in the loop. How should I go about setting it so that when my visitors click on previous, it shows the last tab?

HTML:

<div>
<ul id="wheel-tab" class="nav nav-tabs nav-justified">
<li class="active"><a href="#ocean" data-toggle="tab">Ocean</a></li>
<li><a href="#air" data-toggle="tab">Air</a></li>
<li><a href="#customs" data-toggle="tab">Customs</a></li>
<li><a href="#transport" data-toggle="tab">Transport</a></li>
</ul>
<div class="tab-content">
<div id="ocean" class="tab-pane fade in active">
<h2>Ocean</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="air" class="tab-pane fade in active">
<h2>Air</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="customs" class="tab-pane fade in active">
<h2>Customs</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="transport" class="tab-pane fade in active">
<h2>Transport</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<a class="left carousel-control" href="#" id="wheel-left"role="button" data-slide="prev">
<span class="icon icon-left">Prev</span>
</a>
<a class="right carousel-control" href="#" id="wheel-right" role="button" data-slide="prev">
<span class="icon icon-right">Next</span>
</a>
</div>


JS:

var $tabs = $('#wheel-tab li');

$('#wheel-left').on('click', function () {
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
});

$('#wheel-right').on('click', function () {
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
});


DEMO

Answer

You can add a check of length with respect to prev and next and if it is present just continue with the normal thing else, toggle the last/first tabs respectively. Take a look at solution below and also go through comments:

$('#wheel-left').on('click', function() {
    var prevLen = $tabs.filter('.active').prev('li').length; //check if prev li is present
    if (prevLen)
        $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');//if yes then continue with normal tab switch
    else
        $tabs.filter('li:last').find('a[data-toggle="tab"]').tab('show');//else show the last tab
});

$('#wheel-right').on('click', function() {
    var nextLen = $tabs.filter('.active').next('li').length;//check if next li is present
    if (nextLen)
        $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');//if yes then continue with normal tab switch
    else
        $tabs.filter('li:first').find('a[data-toggle="tab"]').tab('show');//else show the first tab
});

Updated Fiddle