How to JQuery make a transition through the tabs using next and previous?

Hey, guys.
Trying to make navigation tabs in jquery with next and previous buttons.

Here is the code html


  • tab1
    content1


  • tab2
    content2


  • tab3
    content3


prev
next

here is the jquery

$(document).ready(function(){
$('.tab-content:first').show(0);
$('.tab:first>span').addClass('selected');
$('.tab>span').click(function(){
$('.tab>span').removeClass('selected');
$(this).addClass('selected');
$('.tab-content').hide(0);
$(this).next('.tab-content').show(0);
});
});

Does can not handle it
March 23rd 20 at 19:03
1 answer
March 23rd 20 at 19:05
Solution
HTML:
<div class="tab_block">
 <div class="tab">Content#1</div>
 <div class="tab">Content#2</div>
 <div class="tab">Content#3</div>
</div>
<div class="nav_block">
 <a href="#" class="prev">prev</a>
 <a href="#" class="next">next</a>
</div>

CSS:
.d-none{
 display: none;
}
.tab{
 display: none;
}
.tab.selected{
 display: block; 
}

JavaScript:
$(document).ready(function(){
$('.tab:first').addClass('selected');

 $('.nav_block a').click(function(e){
 e.preventDefault(); 
 let this_selected_tab = $('.tab.selected');
if($(this).hasClass('prev')){
 if(this_selected_tab.prev('.tab').length > 0){
 this_selected_tab.prev('.tab').addClass('selected'); 
}else{
$('.tab:last').addClass('selected');
 } 
}
if($(this).hasClass('next')){
 if(this_selected_tab.next('.tab').length > 0){
 this_selected_tab.next('.tab').addClass('selected'); 
}else{
$('.tab:first').addClass('selected');
}
}
this_selected_tab.removeClass('selected');
});
});


Thank you very much.
And as we add more links to the tabs to move was not only using next and previous, but the links on the tabs - Shad.Dare commented on March 23rd 20 at 19:08
@Shad.Dareupdated https://codepen.io/alams-stoyne/pen/oRVmEG look - Alic commented on March 23rd 20 at 19:11
Alams - you are the best!!!!! Thank you very much!!!!)))))))) - Shad.Dare commented on March 23rd 20 at 19:14

Find more questions by tags HTMLjQueryCSS