jqurey实现步骤进度条

来源：互联网发布：火线精英战斗匕首数据编辑：程序博客网时间：2024/06/16 05:59

需导入插件

jquery.min.js
jquery.step.min.js
jquery.step.css
代码

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>jQuery分步步骤</title><link rel="stylesheet" type="text/css" href="css/jquery.step.css" /><script src="js/jquery.min.js"></script><script src="js/jquery.step.min.js"></script><style>button {    display: inline-block;    padding: 6px 12px;    font-size: 14px;    line-height: 1.42857143;    text-align: center;    cursor: pointer;    border: 1px solid transparent;    border-radius: 4px;    color: #fff;    background-color: #5bc0de;}.main {    width: 1000px;    margin: 100px auto;}#step {    margin-bottom: 60px;}.btns {    float: left;}.info {    float: left;    height: 34px;    line-height: 34px;    margin-left: 40px;    font-size: 28px;    font-weight: bold;    color: #928787;}.info span {    color: red;}</style></head><body><div class="main">    <div id="step"></div>    <div class="btns">        <button id="prevBtn">上一步</button>        <button id="nextBtn">下一步</button>        <button id="btn1">跳到第二步</button>        <button id="btn2">跳到第三步</button>    </div>    <div class="info">index：<span id="index"></span></div></div><script type="text/javascript">    var $step = $("#step");    var $index = $("#index");    $step.step({        index: 0,        time: 500,        title: ["填写申请表", "上传资料", "待确认", "已确认", "预约完成"]    });    $index.text($step.getIndex());    $("#prevBtn").on("click", function() {        $step.prevStep();        $index.text($step.getIndex());    });    $("#nextBtn").on("click", function() {        $step.nextStep();        $index.text($step.getIndex());    });    $("#btn1").on("click", function() {        $step.toStep(1);        $index.text($step.getIndex());    });    $("#btn2").on("click", function() {        $step.toStep(2);        $index.text($step.getIndex());    });</script></body></html>

阅读全文

0 0

jqurey实现步骤进度条

需导入插件

代码