<!DOCTYPE html>
<html class="no-js fuelux"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>E-Learning</title> <link rel="stylesheet" href="https://fuelcdn.com/fuelux/2.3/css/fuelux.min.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="container"> <div id="my-wizard" class="wizard"> <ul class="steps"> <li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li> <li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li> <li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li> <li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li> <li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li> </ul> <div class="actions"> <button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button> <button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button> </div> </div> <div class="step-content"> <div class="step-pane active" id="step1"> step1 </div> <div class="step-pane" id="step2"> step2 </div> <div class="step-pane" id="step3"> step3 </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://fuelcdn.com/fuelux/2.3/loader.min.js"></script> <script> $(document).ready(function(){ $('#my-wizard').on('change', function(e, data) { console.log('change'); if(data.step===3 && data.direction==='next') { // return e.preventDefault(); } }); $('#my-wizard').on('changed', function
Fuel UX wizard example
巫马俊力
转载于:https://www.cnblogs.com/angis/p/5142253.html
类似资料：