单击相应的按钮引导程序选项卡时，我有两个常见的“下一个”和“上一个”按钮会移动。我有为此创建以下代码。我的密码
我的问题是我想在单击“下一步”时显示上一个按钮，但想在第一个选项卡上隐藏，反之亦然。请帮忙。
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();
}
});
我已更新您的代码以使其正常运行。仅更新了JS代码。
请检查演示链接。
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句