jQuery滑块/切换器/标签

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>

很抱歉的样子，有些化妆品的CSS缺失这里。

实际问题： 我想在我的“标签内容”下添加按钮“下一步”。如果我们现在正在步骤1中，那么单击该按钮应该使我们进入步骤2，依此类推。 与此同时，我们的“标签菜单”脚本应该被激活 - 如片段：关闭其他步骤的描述，显示当前描述并添加类“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>