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>