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」を追加します。

一般的なスライダーとほぼ同じことができます。スライド間で移動する矢印（次へ、前へ）と、正しいドットが強調表示された「ドットメニュー」です。

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>