Как в JQuery сделать переход по вкладкам при помощи next и previous?

Question

[Дмитрий]

Ребят, привет.
Пытаюсь сделать переходы по вкладкам на jquery при помощи next и previous.

Вот код html

• 
  tab1
  content1
  
  
• 
  tab2
  content2
  
  
• 
  tab3
  content3
  
  

prev
next


вот 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);
});
});

Никак справится не могу

Comments

[Влад Володько]

Скиньте еще html

[Alams Stoyne]

Чуть глаза не сломал сформируй в вопросе КОД правильно

[Дмитрий]

Извиняюсь, криво код скинулся

<ul class="tabs">
<li class="tab">
    <span>tab1</span>
    <div class="tab-content">content1</div>
</li>
<li class="tab">
    <span>tab2</span>
    <div class="tab-content">content2</div>
</li>
<li class="tab">
    <span>tab3</span>
    <div class="tab-content">content3</div>
</li>
</ul>

[Дмитрий]

Вот примерный

[Дмитрий]

Добавил next и previous

<ul class="tabs">
<li class="tab">
    <span>tab1</span>
    <div class="tab-content">content1</div>
</li>
<li class="tab">
    <span>tab2</span>
    <div class="tab-content">content2</div>
</li>
<li class="tab">
    <span>tab3</span>
    <div class="tab-content">content3</div>
</li>
</ul>
<div class="arrows>"
<a href="#" class="left-arrow">Prev</a>
<a href="#" class="right-arrow">Next</a>
</div>

Answer 1

[Alams Stoyne]

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

Comments

[Дмитрий]

Спасибо огромное.
А как сюда добавить еще ссылки к вкладкам, чтобы переходить можно было не только с помощью next и previous, но и по ссылкам на вкладках

[Alams Stoyne]

Дмитрий, обновил https://codepen.io/alams-stoyne/pen/oRVmEG глянь

[Дмитрий]

Alams - вы лучший!!!!! Спасибо огромное!!!!))))))))