jQuery滑块/切换器/标签

Question

我不知道如何标题这个主题，对不起。我正在建造简单的购物车分成几个步骤。整个过程应该与滑块或众所周知的标签类似。

让我们看看代码，让事情变得更轻松。

＆＃13;

＆＃13;

$(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;
    }

  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

对不起外观，这里缺少一些化妆品css。

实际问题： 我想添加按钮＆＃34; Next＆＃34;就在我的＆＃34;标签内容＆＃34;。如果我们此时在步骤1中，点击该按钮会将我们带到第2步，依此类推。 与此同时，我们的＆＃34;标签菜单＆＃34;脚本应该被激活 - 如在片段中：关闭其他步骤，显示当前描述并添加类＆＃34; stepActive＆＃34;。

你可以在常见的滑块中找到几乎相同的东西：在幻灯片之间移动的箭头（下一个，上一个）以及＆＃34;点菜单＆＃34;正确的点突出显示。

Answer 1

如果我没有弄错的话，那就是那样的，你想要的，不是吗？

＆＃13;

＆＃13;

   

$(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();
    });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;