下一个上一个 Bootstrap 选项卡答案

【问题标题】：Next Previous Bootstrap tabs下一个上一个 Bootstrap 选项卡
【发布时间】：2019-08-09 20:13:09
【问题描述】：

我有两个常见的“NEXT”和“PREVIOUS”按钮，点击相应的按钮引导选项卡应该移动。我为此创建了以下代码。 My Code

我的问题是我想在单击“NEXT”按钮时显示上一个按钮，但想在第一个活动选项卡上隐藏，反之亦然。请帮忙。

jQuery('#ntxbtn').click(function(e){
    e.preventDefault();
    var next_tab = jQuery('.nav-tabs > .active').next('li').find('a');
    jQuery('#prevbtn').show();
    if(next_tab.length>0){
      next_tab.trigger('click');
    }else if(next_tab.length>0){
      jQuery('#ntxbtn').hide();
    }
  });
  jQuery('#prevbtn').click(function(e){
    e.preventDefault();
    var next_tab = jQuery('.nav-tabs > .active').prev('li').find('a');
    if(next_tab.length>0){
      next_tab.trigger('click');
    }else {
      jQuery('#prevbtn').hide();
    }
  });

【问题讨论】：

标签： jquery html twitter-bootstrap twitter-bootstrap-3 tabs

【解决方案1】：

我已更新您的代码以正常运行。只更新了 JS 代码。

请查看demo link。

var totalTabs = $('.nav-tabs li').length;
var currentTab = 1;

$('#ntxbtn').click(function(e){
    e.preventDefault();
    currentTab +=1;
    showHideControls();
    var next_tab = $('.nav-tabs > .active').next('li').find('a');
    if(next_tab.length > 0){
      next_tab.trigger('click');
    }
  });
  $('#prevbtn').click(function(e){
    e.preventDefault();
    currentTab -=1;
    showHideControls();
    var prev_tab = $('.nav-tabs > .active').prev('li').find('a');
    if(prev_tab.length > 0){
      prev_tab.trigger('click');
    }
});

function showHideControls(){

  if(currentTab == 1){
    $('#prevbtn').hide();
  } else if(currentTab == totalTabs){
		$('#ntxbtn').hide();
  } else {
    $('#prevbtn').show();
    $('#ntxbtn').show();
  }

}

.nav-tabs li a{
  display:inline-block;
  padding:5px;
  border:1px solid #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane  in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

<a href="#" type="button" class="btn btn-primary" id="prevbtn" style="display:none;"></i> Previous</a>
                                <a href="#" type="button" class="btn btn-primary" id="ntxbtn"> Next</a>

【讨论】：

【解决方案2】：

这可能有效：

jQuery('#ntxbtn').click(function (e) {
    e.preventDefault();
    var next_tab = jQuery('.nav-tabs > .active').next('li').find('a');
    jQuery('#prevbtn').show();
    if (next_tab.length > 0) {
        next_tab.trigger('click');
    }
    checkNavButtons();
});
jQuery('#prevbtn').click(function (e) {
    e.preventDefault();
    var next_tab = jQuery('.nav-tabs > .active').prev('li').find('a');
    if (next_tab.length > 0) {
        next_tab.trigger('click');
    }
    checkNavButtons();
});


function checkNavButtons() {
    var activeButton = jQuery('.nav-tabs > .active');
    var nextNav = activeButton.next('li').find('a');
    var prevNav = activeButton.prev('li').find('a');

    if (nextNav.length) {
        jQuery('#ntxbtn').show();
    } else {
        jQuery('#ntxbtn').hide();
    }

    if (prevNav.length) {
        jQuery('#prevbtn').show();
    } else {
        jQuery('#prevbtn').hide();
    }
}

见小提琴：https://jsfiddle.net/rp2w4Ljq/3/

【讨论】：