jquery - 带有可点击步骤的多步骤表单

Question

你好有人可以帮助我如何实现如图所示的多步骤设计

我提到了链接，但其中有一个下一步按钮可以移动到一个新步骤，但我希望数字也可以点击。我该如何实现？

Answer 1

您可以使用 Bootstrap 向导，例如 twitter bootstrap wizard

演示:

$(document).ready(function() {
  $('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
    var $total = navigation.find('li').length;
    var $current = index+1;
    var $percent = ($current/$total) * 100;
    $('#rootwizard').find('.bar').css({width:$percent+'%'});
  }});
});

<link href="http://vadimg.com/twitter-bootstrap-wizard-example/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>

<div id="rootwizard">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <ul>
          <li><a href="#tab1" data-toggle="tab">First</a></li>
          <li><a href="#tab2" data-toggle="tab">Second</a></li>
          <li><a href="#tab3" data-toggle="tab">Third</a></li>
          <li><a href="#tab4" data-toggle="tab">Forth</a></li>
          <li><a href="#tab5" data-toggle="tab">Fifth</a></li>
          <li><a href="#tab6" data-toggle="tab">Sixth</a></li>
          <li><a href="#tab7" data-toggle="tab">Seventh</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="bar" class="progress progress-striped active">
    <div class="bar"></div>
  </div>
  <div class="tab-content">
    <div class="tab-pane" id="tab1">
      1
    </div>
    <div class="tab-pane" id="tab2">
      2
    </div>
    <div class="tab-pane" id="tab3">
      3
    </div>
    <div class="tab-pane" id="tab4">
      4
    </div>
    <div class="tab-pane" id="tab5">
      5
    </div>
    <div class="tab-pane" id="tab6">
      6
    </div>
    <div class="tab-pane" id="tab7">
      7
    </div>
    <ul class="pager wizard">
      <li class="previous first" style="display:none;"><a href="#">First</a></li>
      <li class="previous"><a href="#">Previous</a></li>
      <li class="next last" style="display:none;"><a href="#">Last</a></li>
      <li class="next"><a href="#">Next</a></li>
    </ul>
  </div>	
</div>