[英]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: 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: 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');
});
try the following: 尝试以下方法:
Using :first
and :last
test if its the last/first item in the list, if it is show the first/last tab 使用:first
和:last
测试其是否为列表中的最后/第一项(如果显示了第一/最后一个选项卡)
var $tabs = $('#wheel-tab li');
$('#wheel-left').on('click', function () {
if($('.active').is('#wheel-tab li:first')) {
$('#wheel-tab li:last').find('a[data-toggle="tab"]').tab('show');
} else {
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
}
});
$('#wheel-right').on('click', function () {
if($('.active').is('#wheel-tab li:last')) {
$('#wheel-tab li:first').find('a[data-toggle="tab"]').tab('show');
} else {
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
}
});
https://jsfiddle.net/pc28q6wa/ https://jsfiddle.net/pc28q6wa/
or: 要么:
var $tabs = $('#wheel-tab li');
var first = $('#wheel-tab li:first');
var last = $('#wheel-tab li:last');
$('#wheel-left').on('click', function () {
if($('.active').is(first)) {
last.find('a[data-toggle="tab"]').tab('show');
} else {
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
}
});
$('#wheel-right').on('click', function () {
if($('.active').is(last)) {
first.find('a[data-toggle="tab"]').tab('show');
} else {
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
}
});
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. 您可以添加长度的检查相对于prev
和next
,如果它存在只是继续与其他的正常的事情,切换到last/first
分别标签。 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
I have tried this code and it is perfectly working for me .Have a look at it. 我已经试过了这段代码,对我来说很完美,请看一下它。
$('#wheel-left').on('click', function () {
if($tabs.filter('.active').prev('li').is('li') > 0) {
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
}
else{
$tabs.last().tab('show');
}
});
$('#wheel-right').on('click', function () {
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
});
Thanks 谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.