下一个 上一个 Bootstrap 选项卡

Posted 2023-05-08

【中文标题】下一个 上一个 Bootstrap 选项卡

【英文标题】：Next Previous Bootstrap tabs

【发布时间】：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();
    
  );

【参考方案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/