javascript - jQuery slider /切换器/选项卡

Question

我不知道如何为这个主题命名，抱歉。我正在构建简单的购物车，分为几个步骤。整个事情应该类似于 slider 或众所周知的选项卡。

让我们看看代码，让事情变得更简单。

$(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”。

您可以在普通 slider 中找到几乎相同的东西:在幻灯片之间移动的箭头(下一个，上一个)以及突出显示正确点的“点菜单”。

Answer 1

如果我没记错的话，就是这样，你想要的，不是吗？

   

$(document).ready(function(){
    
     $('.stepNumber:contains(3)').click(function(){
        alert('blabla');
      });
        
    $('.nextStep').click(function (e) {
      	e.preventDefault();	
    	var stepActive = $('.stepActive');
        if (stepActive.next('.step').length)
        	stepActive.next().children('.stepNumber')[0].click();
        else
        	 $('.step > .stepNumber')[0].click();
      });
    
      $('.stepNumber').click(function(e) {
        e.preventDefault();
    
    	var obj = $(this);
        var parent = obj.parent();
    	var stepDesc = obj.next('.stepDesc');
    
        if(!stepDesc.is(':visible')) {
          $('.step').removeClass('stepActive');
          parent.addClass('stepActive');
        }
    
    	$('[id^=step]').hide();
    	$('#step' + obj.text()).show();
    	
      });
      
      $('.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">
	The last one
</div>
<div class="nextStep">Next</div>