使用 ZUI 标签页实现步骤指示器

ZUI例子模板，Fork来编写你的代码。

HTML

<link rel="stylesheet" href="https://easysoft.github.io/zui/dist/css/zui.min.css">
<link rel="stylesheet" href="https://easysoft.github.io/zui/dist/lib/datatable/zui.datatable.min.css">
<script src="https://easysoft.github.io/zui/dist/js/zui.min.js"></script>
<script src="https://easysoft.github.io/zui/dist/lib/datatable/zui.datatable.js        "></script>
<script src="https://easysoft.github.io/zui/dist/lib/calendar/zui.calendar.min.js"></script>
<link rel="stylesheet" href="https://easysoft.github.io/zui/dist/lib/calendar/zui.calendar.min.css">
<div class="container">
  <h1>使用 ZUI 标签页实现步骤指示器</h1>
  <div id="step" class='step'>
      <ul id="myTab" class="nav nav-secondary nav-justified">
        <li>
          <a href="#tab1" data-toggle="tab"><i class="icon icon-check">1</i>第一步</a>
        </li>
        <li class="active">
          <a href="#tab2" data-toggle="tab"><i class="icon icon-check">2</i>第二步</a>
        </li>
        <li>
          <a href="#tab3" data-toggle="tab"><i class="icon icon-check">3</i>第三步</a>
        </li>
        <li>
          <a href="#tab4" data-toggle="tab"><i class="icon icon-check">4</i>第四步</a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane" id="tab1">
          <p>第一步</p>
          <div class="text-right">
            <a class="btn btn-primary" href="#tab2">下一步</a>
          </div>
        </div>
        <div class="tab-pane active in" id="tab2">
          <p>第二步</p>
          <div class="text-right">
            <a class="btn btn-link" href="#tab1">上一步</a>
            <a class="btn btn-primary" href="#tab3">下一步</a>
          </div>
        </div>
        <div class="tab-pane" id="tab3">
          <p>第三步</p>
          <div class="text-right">
            <a class="btn btn-link" href="#tab2">上一步</a>
            <a class="btn btn-primary" href="#tab4">下一步</a>
          </div>
        </div>
        <div class="tab-pane" id="tab4">
          <p>第四步</p>
          <div class="text-right">
       ...

CSS

.step .nav {
  margin: 20px 0;
}
.step .nav > li > a {
  position: relative;
  border-bottom: none;
  border-top: 10px solid #DDF4DF;
  padding-top: 10px;
}
.step .nav > li > a:hover {
  box-shadow: 0 -10px 0 #f1f1f1;
}
.step .nav > li.active > a {
  border-color: #3280fc;
}
.step .nav > li.active + li > a,
.step .nav > li.active + li + li > a,
.step .nav > li.active + li + li + li > a,
.step .nav > li.active + li + li + li + li > a {
  border-color: #38B03F;
}
.step .nav > li > a > i {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  text-align: center;
  line-height: 20px;
  position: absolute;
  top: -14px;
  background-color: #38B03F;
  color: #fff;
  left: 50%;
  margin-left: -10px;
}
.step .nav > li > a > i:before {
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #38B03F;
  top: 0;
  left: 0;
  transform: scale(1);
  opacity: 1;
  transition: transform .4s, top .4s, opacity .4s;
}
.step .nav > li.active > a > i {
  background-color: #3280fc;
}
.step .nav > li.active + li > a,
.step .nav > li.active + li + li > a,
.step .nav > li.active + li + li + li > a,
.step .nav > li.active + li + li + li + li > a {
  border-color: #e5e5e5;
}
.step .nav > li.active + li > a > i,
.step .nav > li.active + li + li > a > i,
.step .nav > li.active + li + li + li > a > i,
.step .nav > li.active + li + li + li + li > a > i {
  background-color: #bbb;
}
.step .nav > li.active > a > i:before,
.step .nav > li.active + li > a > i:before,
.step .nav > li.active + li + li > a > i:before,
.step .nav > li.active + li + li + li > a > i:before,
.step .nav > li.active + li + li + li + li > a > i:before {
  top: 20px;
  transform: scale(.5, 0);
  opacity: 0;
}
.step .tab-pane {
  padding: 20px;
  background: #e5e5e5;
}

JavaScript

$(function() {
    
    // 使得 .tab-content 内的按钮也可以切换标签
    $('#step .tab-content').on('click', '.btn', function() {
    		 $('#step .nav a[href="' + $(this).attr('href') + '"]').trigger('click');
    });
});