layui 利用tab选项卡实现：上一步，下一步操作

虽然闲心大大已经关闭layui官网，可他一直是我们jQuery族的骄傲，话不多说了

效果如下：

CSS

/* 顺序tab */
.order_tab .layui-tab-title{border: none !important;text-align: center;}
.order_tab .layui-tab-title li+li{margin: 0 0 0 50px;}
.order_tab .layui-tab-title li>span{width: 35px; height: 35px;display: inline-block;border: 1px solid #999;line-height: 35px;border-radius: 35px;margin: 0 10px 0 0;}
.order_tab .layui-tab-title li.layui-this>span{background: #009688;border: 1px solid #009688;color: #fff;}
.order_tab .layui-tab-title .layui-this:after{border: none;}
.order_tab .layui-tab-title li+li:after{position: absolute;content: '';top: calc(50% - 1px);background: #999;border-radius: 2px;height: 2px;left: -55px;width: 60px;}

/* 上/下一步 */
.order_tab .bottom_all{text-align: center;}

HTML

<div class="layui-tab layui-tab-brief order_tab" lay-filter="group">
    <ul class="layui-tab-title">
        <li lay-id="1" class="layui-this"><span>1</span>基本信息</li>
        <li lay-id="2"><span>2</span>奖品设置</li>
        <li lay-id="3"><span>3</span>群聊设置</li>
        <li lay-id="4"><span>4</span>海报设置</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show"></div>
        <div class="layui-tab-item"></div>
        <div class="layui-tab-item"></div>
        <div class="layui-tab-item"></div>
    </div>

    <!-- 上/下一步 -->
    <div class="bottom_all">
        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal back_btn" onclick="onJump(0)">上一步</button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal next_btn" onclick="onJump(1)">下一步</button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal store_btn">保存</button>
    </div>
</div> 

JS

<script>

    var layid = 1; // tab位置
    
    layui.use('element', function(){
        element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    
        //Hash地址的定位
        layid = location.hash.replace(/^#tabs=/, '');
        element.tabChange('group', layid);
        
        // 监听切换
        element.on('tab(group)', function(elem){
            location.hash = 'tabs='+ $(this).attr('lay-id');
        });
    
    });

    // 上/下一步
    function onJump(type){
        layid = parseInt(layid);
        if(type==0&&layid>1){ layid--; } // 上一步
        if(type==1&&layid<4){ layid++; } // 下一步
        
        location.hash = 'tabs='+ layid; // 地址存储

        //Hash地址的定位
        layid = location.hash.replace(/^#tabs=/, '');
        element.tabChange('group', layid);
    }

</script>