Question

我分别单击两个按钮的“引导”选项卡上的“ NEXT”和“ PREVIOUS”两个公共按钮。我有为此创建以下代码。 My Code

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

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

Answer 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>

Answer 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/

下一个上一个Bootstrap选项卡

2 个答案: