gpt4 book ai didi

javascript - 使用 Bootstrap Tab 循环工作的“下一个-上一个”按钮

转载 作者:行者123 更新时间:2023-11-28 15:09:08 24 4
gpt4 key购买 nike

目前“上一个”按钮在第一个选项卡中不起作用,因为它不在循环中。我应该如何设置它,以便当我的访问者单击上一个时,它显示最后一个选项卡?

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

最佳答案

尝试以下操作:

使用 :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/

或者:

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');
}
});

关于javascript - 使用 Bootstrap Tab 循环工作的“下一个-上一个”按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37428298/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com