jQuery slider/switcher/tabs

Question

Я понятия не имел, как назвать эту тему, извините за это. Я строю простую корзину покупок, разбитую на несколько шагов. Все это должно работать подобно слайдерам или известным вкладкам.

Давайте посмотрим на код, чтобы все стало проще.

$(document).ready(function(){ 
 
    $('.stepNumber').click(function(e) { 
 
    e.preventDefault(); 
 
    var stepDesc = $(this).next('.stepDesc'); 
 

 
    if(!stepDesc.is(':visible')) { 
 
     $('.step').removeClass('stepActive'); 
 
     $(this).parent().addClass('stepActive'); 
 
    } 
 

 
    var val = parseInt($('.step.stepActive').children('div.stepNumber').text()); 
 

 
    switch(val) { 
 
     case 1: 
 
     $('.formStepTwo').hide(); 
 
     $('.formStepOne').show(); 
 

 
     break; 
 
     case 2: 
 
     $('.formStepOne').hide(); 
 
     $('.formStepTwo').show(); 
 
     break; 
 
     case 3: 
 
     alert('blabla'); 
 
     break; 
 
    } 
 

 
    }); 
 
});

.formStep { 
 
    display: none; 
 
} 
 
step { 
 
    float: left; 
 
    border: 1px solid #333; 
 
    margin-right: 5px; 
 
} 
 

 
.stepNumber { 
 
    background: #333; 
 
    color: #fff; 
 
    float: left; 
 
    padding: 6px 10px; 
 
} 
 
.stepDesc { 
 
    text-align: left; 
 
    padding: 6px 10px; 
 
    width: 150px; 
 
    display: none; 
 
} 
 

 
.stepActive > .stepDesc { 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="step stepOne stepActive"> 
 
    <div class="stepNumber">1</div> 
 
    <div class="stepDesc">Cart</div> 
 
</div> 
 
<div class="step stepTwo"> 
 
    <div class="stepNumber">2</div> 
 
    <div class="stepDesc">Client data</div> 
 
</div> 
 
<div class="step stepThree"> 
 
    <div class="stepNumber">3</div> 
 
    <div class="stepDesc">Shipping data</div> 
 
</div> 
 

 
<div class="formStep formStepOne"> 
 
    Something - tab content 
 
</div> 
 
<div class="formStep formStepTwo"> 
 
    Something else 
 
</div>

Извините за внешний вид, некоторые косметические КСС здесь отсутствует.

Актуальная проблема: Я хочу добавить кнопку «Далее» прямо под моим «содержанием вкладки». Если мы сейчас на шаге 1, нажатие этой кнопки приведет нас к шагу 2 и так далее. В то же время нужно активировать скрипт «tab menu» - как в фрагменте: закрыть описание другого шага, показать текущее описание и добавить класс «stepActive».

Почти то же самое, что вы можете найти в общих слайдерах: стрелки (next, prev) для перемещения между слайдами, а также «точка-меню» с выделенной точкой.

Answer 1

Если я не ошибаюсь, это что-то вроде того, чего вы хотели, не так ли?

 

 
$(document).ready(function(){ 
 
    
 
    $('.stepNumber:contains(3)').click(function(){ 
 
     alert('blabla'); 
 
     }); 
 
     
 
    $('.nextStep').click(function (e) { 
 
     \t e.preventDefault(); \t 
 
    \t var stepActive = $('.stepActive'); 
 
     if (stepActive.next('.step').length) 
 
     \t stepActive.next().children('.stepNumber')[0].click(); 
 
     else 
 
     \t $('.step > .stepNumber')[0].click(); 
 
     }); 
 
    
 
     $('.stepNumber').click(function(e) { 
 
     e.preventDefault(); 
 
    
 
    \t var obj = $(this); 
 
     var parent = obj.parent(); 
 
    \t var stepDesc = obj.next('.stepDesc'); 
 
    
 
     if(!stepDesc.is(':visible')) { 
 
      $('.step').removeClass('stepActive'); 
 
      parent.addClass('stepActive'); 
 
     } 
 
    
 
    \t $('[id^=step]').hide(); 
 
    \t $('#step' + obj.text()).show(); 
 
    \t 
 
     }); 
 
     
 
     $('.stepNumber')[0].click(); 
 
    });

.formStep { 
 
    display: none; 
 
} 
 
.step { 
 
    float: left; 
 
    border: 1px solid #333; 
 
    margin-right: 5px; 
 
} 
 

 
.stepNumber, .nextStep { 
 
    background: #333; 
 
    color: #fff; 
 
    float: left; 
 
    padding: 6px 10px; 
 
} 
 

 
.stepDesc { 
 
    text-align: left; 
 
    padding: 6px 10px; 
 
    width: 150px; 
 
    display: none; 
 
} 
 

 
.stepActive > .stepDesc { 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <div class="step"> 
 
    <div class="stepNumber">1</div> 
 
    <div class="stepDesc">Cart</div> 
 
</div> 
 
<div class="step"> 
 
    <div class="stepNumber">2</div> 
 
    <div class="stepDesc">Client data</div> 
 
</div> 
 
<div class="step"> 
 
    <div class="stepNumber">3</div> 
 
    <div class="stepDesc">Shipping data</div> 
 
</div> 
 
<div id="step1" class="formStep"> 
 
    Something - tab content 
 
</div> 
 
<div id="step2" class="formStep"> 
 
    Something else 
 
</div> 
 
<div id="step3" class="formStep"> 
 
\t The last one 
 
</div> 
 
<div class="nextStep">Next</div>