我想为JS选项卡添加下一步/上一步按钮,这样用户就可以使用这些按钮转到下一个选项卡。此外,我希望上一个按钮只在第二个选项卡打开时出现,下一个按钮在最后一个选项卡打开时消失。我该怎么做呢?
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
#tab-1 {
display: block;
}
.tab-content {
display: none;
overflow: hidden;
}
<ul class="tabs-menu" class="articles">
<li class="current"><a href="#tab-1">tab 1</a>
</li>
<li><a href="#tab-2">tab 2</a>
</li>
<li><a href="#tab-3">tab 3</a>
</li>
<li><a href="#tab-4">tab 4</a>
</li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">Content 1</div>
<div id="tab-2" class="tab-content">Content 2</div>
<div id="tab-3" class="tab-content">Content 3</div>
<div id="tab-4" class="tab-content">Content 4</div>
</div>
我们已经为您的代码尝试了下一个previous按钮查看这个jsfiddle链接
$('#nex').on('click',function(){
if(count<4)
{
$('.tab-content').hide()
count++;
$('#tab-'+count).show();
if(count>1)
$('#pre').show();
else
$('#pre').hide();
}
});
$('#pre').on('click',function(){
if(count>1)
{
$('.tab-content').hide()
count--;
$('#tab-'+count).show();
if(count<4)
$('#nex').show();
else
$('#nex').hide();
}
});