I want to add Next/Previous buttons for JS tabs, so users can go to a next tab using these buttons. Also, I want previous button appear only when the second tab opened and next button disappear when the last tab is opened. How can I do that?
$(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>
we have tried the next previous button for your code check this jsfiddle link
$('#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();
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.