时间戳

首页 > 解决方案 > JQuery在引导选项卡中隐藏最后一个下一个按钮

jquery - JQuery在引导选项卡中隐藏最后一个下一个按钮

问题描述

我使用引导选项卡来查看我的内容，在每个选项卡内都有一个下一个和上一个按钮来浏览每个选项卡，这是我的 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 和工具集视图动态创建它，所以我不能只删除最后一个项目中的下一个按钮，所以如果有办法检测它是否已经到达选项卡上的最后一项，它将触发隐藏该选项卡内容上的下一个按钮？

标签： jquerybootstrap-4

解决方案

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

请看下面的示例代码

$('.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()函数，以便下一个和上一个按钮将隐藏显示。

推荐阅读