JQuery隐藏启动选项卡中的最后一个下一个按钮

Question

我使用引导选项卡来查看我的内容，在每个选项卡中都有一个下一个和上一个按钮来导航每个选项卡，这就是我的HTML:

<div class="nav nav-thumb" id="thumb-tabs" role="tablist">
<a class="nav-link nav-link-thumb active" id="1-tab" data-toggle="pill" href="#thumb-item-1" role="tab" aria-controls="thumb-item-1" aria-selected="true">
1st item
</a>
<a class="nav-link nav-link-thumb" id="2-tab" data-toggle="pill" href="#thumb-item-2" role="tab" aria-controls="thumb-item-2" aria-selected="false">
2nd item
</a>
<a class="nav-link nav-link-thumb" id="3-tab" data-toggle="pill" href="#thumb-item-3" role="tab" aria-controls="thumb-item-3" aria-selected="false">
3rd item
</a>
</div>

<div class="tab-content" id="thumbcontent">
<div class="tab-pane fade show active" id="thumb-item-1" role="tabpanel" aria-labelledby="1-tab">
1st content
<div class="btn-container">
<a class="next">next</a>
</div>
</div>
<div class="tab-pane fade" id="thumb-item-2" role="tabpanel" aria-labelledby="2-tab">
2nd content
<div class="btn-container">
<a class="prev">prev</a>
<a class="next">next</a>
</div>
</div>
<div class="tab-pane fade" id="thumb-item-3" role="tabpanel" aria-labelledby="3-tab">
3rd content
<div class="btn-container">
<a class="prev">prev</a>
<a class="next">next</a>
</div>
</div>
</div>

这是给我的JS:的

$('.next').click(function(){
$('#thumb-tabs > .active').next('a').trigger('click');
});
$('.prev').click(function(){
$('#thumb-tabs > .active').prev('a').trigger('click');
});

我想做的是隐藏最后一个选项卡项目中的下一个按钮，问题是我使用Wordpress和Toolset视图动态创建这个按钮，所以我不能只删除最后一个项目中的上一个按钮。所以如果有办法检测它是否已经到达选项卡上的最后一个项，它将触发隐藏选项卡内容上的下一按钮？

Answer 1

您可以编写一个通用函数来检查第一个或最后一个选项卡是否处于活动状态，因此您可以禁用/隐藏上一个和下一个按钮。

请参阅以下样本代码

$('.next').click(function(){
$('#thumb-tabs > .active').next('a').trigger('click');
showHideButtons();
});
$('.prev').click(function(){
$('#thumb-tabs > .active').prev('a').trigger('click');
showHideButtons();
});
function showHideButtons() {
//check if first tab is active
if( $('#thumb-tabs > a:first').hasClass('active')){
$('.prev').hide();
} else{
$('.prev').show();
}
//check if last tab is active
if( $('#thumb-tabs > a:last').hasClass('active')){
$('.next').hide();
} else{
$('.next').show();
}
}

您也可以在点击选项卡时调用showHideButtons()函数，这样下一个和上一个按钮将得到隐藏显示。