基于jquery的向导功能，html+css+js

效果图：

 

以下代码是本人手写，使用前请测试。

定义HTML结构:

    <div class="ms-wizard">
        <ol>
            <li class="done" >选卡</li>
            <li>选资费</li>
            <li>下单</li>
            <li>发卡</li>
            <li>完成</li>
        </ol>
        <div class="wizard-content">
            <div class="wizard-tab">
                选卡
            </div>
            <div class="wizard-tab">
                选资费
            </div>
        </div>
        <button class="btn btn-primary prev">上一步</button>
        <button class="btn btn-primary next">下一步</button>
    </div>

css，less源码：

.ms-wizard {
    ol {
        height: 80px;
        padding: 0;
        display: flex;

        li {
            font-weight: bold;
            align-items: end; /*垂直居中*/
            justify-content: center; /*水平居中*/
            flex: 1;
            height: 100%;
            position: relative;
            display: block;
            text-align: center;
            vertical-align: bottom;
            cursor: pointer;

            &::before {
                position: absolute;
                top: 50%;
                left: 0;
                z-index: -1;
                width: 100%;
                height: 4px;
                content: ' ';
                display: block;
                background-color: #cacaca;
                line-height: 30px;
            }

            &::after {
                margin: auto;
                margin-top: 4px;
                background-color: #cacaca;
                color: #fff;
                font-size: 14px;
                width: 40px;
                height: 40px;
                content: attr(step);
                display: block;
                line-height: 40px;
                border-radius: 50%;
            }

            &:hover::after {
                background-color: #979797;
            }
        }

        li.done {
            &::before {
                background-color: #2b2121;
            }

            &::after {
                background-color: #2b2121;
            }
        }
    }
    .wizard-tab{
        display:none;
    }
}

JS代码：

(function ($, w, d, undefined) {
            let config = {
                _obj: null,//向导最外层div
                btnPrev: null,
                btnNext: null,
                step: 0,//当前步骤
                steps: 0,//步骤对应的内容数量
                max: 1,//步骤数量
                setStep: function (_step) {
                    //_step指选中第几步，从0开始
                    if (_step >= config.steps || _step < 0) {
                        return;
                    }
                    this.step = _step;
                    this.change();
                },
                change: function (_$this) {
                    //console.log(this.step, this.steps, this.max);
                    //if (this.step + 1 >= this.steps || this.step<=0) {
                    //    return;
                    //}
                    if (!_$this) {
                        _$this = this._obj.find(`li:eq(${this.step})`);
                    }

                    _$this.addClass("done").prevAll().addClass("done");
                    _$this.nextAll().removeClass("done");

                    this._obj.find(".wizard-content:first").children(`div:eq(${this.step})`).show().siblings().hide();

                    this.btnPrev.removeAttr("disabled");
                    this.btnNext.removeAttr("disabled");
                    if (this.step <= 0) {
                        this.btnPrev.attr("disabled", "disabled");
                    } else if (this.step >= this.steps - 1) {
                        this.btnNext.attr("disabled", "disabled");
                    }
                    //console.log(this.step);
                }, prev: function () {
                    if (this.step > 0) {
                        this.step = this.step - 1;
                        config.change();
                    }
                }, next: function () {
                    if (this.max - 1 > this.step) {
                        this.step = this.step + 1;
                        config.change();
                    }
                }
            };
            jQuery.fn.wizard = function (paras) {
                config = Object.assign(config, paras);
                var _this = this;
                var _$this = $(this);
                config._obj = _$this;
                config.steps = _$this.find(".wizard-content").children("div").length;
                //默认显示第一步内容
                _$this.find(".wizard-content").children(`div:eq(${config.step})`).show();
                config.max = _$this.find("li").length;

                config.max = _$this.find("li").each(function (index, item) {
                    item.setAttribute("step", index + 1);
                }).click(function () {
                    var _index = parseInt($(this).attr("step")) - 1;
                    if (_index + 1 > config.steps || _index < 0) {
                        return;
                    }
                    config.step = _index;
                    config.change($(this));
                }).length;

                //上一步
                config.btnPrev = _$this.find("button.prev").click(function () {
                    //config.step = config.step -1;
                    config.prev();
                });
                //下一步
                config.btnNext = _$this.find("button.next").click(function () {
                    //config.step = config.step + 1;
                    config.next();
                });

                config.change();
                return config;
            }
        })($, window, document, undefined);

使用方法：

//使用方法

初始向导
var wizard = $(".ms-wizard").wizard({
 step: 1 //1表示默认选中第2步
});

//跳转到第一步
wizard.setStep(0);