jquery-smartwizard

有好心人分享 wizard 的元件，使用起來還滿簡單的，github 專案：
https://github.com/techlab/jquery-smartwizard

執行截圖：

簡單的範例：
https://codepen.io/techlab/pen/JjGZvaz

html:

<div id="smartwizard">
    <ul class="nav">
       <li>
           <a class="nav-link" href="#step-1">
              Step 1
           </a>
       </li>
       <li>
           <a class="nav-link" href="#step-2">
              Step 2
           </a>
       </li>
       <li>
           <a class="nav-link" href="#step-3">
              Step 3
           </a>
       </li>
       <li>
           <a class="nav-link" href="#step-4">
              Step 4
           </a>
       </li>
    </ul>
 
    <div class="tab-content">
       <div id="step-1" class="tab-pane" role="tabpanel">
          Step 1 content
       </div>
       <div id="step-2" class="tab-pane" role="tabpanel">
          Step 2 content
       </div>
       <div id="step-3" class="tab-pane" role="tabpanel">
          Step 3 content
       </div>
       <div id="step-4" class="tab-pane" role="tabpanel">
          Step 4 content
       </div>
    </div>
</div>

說明：<div class=”tab-content”> 必須存在，不然程式會出錯。

範例2:
https://techlaboratory.net/jquery-smartwizard

下一步：

$('#smartwizard').smartWizard("next");

上一步：

$('#smartwizard').smartWizard("prev");

重設：

$('#smartwizard').smartWizard("reset");

到指定 step: // Go to step without force

$('#smartwizard').smartWizard("goToStep", 3);

到指定 step: // Go to step with force

$('#smartwizard').smartWizard("goToStep", 3, true);