layui 标签页切换

<div class="layui-tab" lay-filter="test1">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="111" >文章列表</li>
    <li lay-id="222">发送信息</li>
    <li lay-id="333">权限分配</li>
    <li lay-id="444">审核</li>
    <li lay-id="555">订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div id="div1" class="layui-tab-item layui-show">1</div>
    <div id="div2" class="layui-tab-item">2</div>
    <div id="div3" class="layui-tab-item">3</div>
    <div id="div4" class="layui-tab-item">4</div>
    <div id="div5" class="layui-tab-item">5</div>
  </div>
</div>

 

<script>
    layui.use('element', function() {
        var element = layui.element();


        //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
        var layid = location.hash.replace(/^#test1=/, '');
        element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项



        //监听Tab切换，以改变地址hash值
        element.on('tab(test1)', function() {
            location.hash = 'test1=' + this.getAttribute('lay-id');
            if ("#test1=111" == location.hash) {
                document.getElementById("div1").className = "layui-tab-item layui-show";
                document.getElementById("div2").className = "layui-tab-item";
                document.getElementById("div3").className = "layui-tab-item";
                document.getElementById("div4").className = "layui-tab-item";
                document.getElementById("div5").className = "layui-tab-item";
            } else if ("#test1=222" == location.hash) {
                document.getElementById("div1").className = "layui-tab-item";
                document.getElementById("div2").className = "layui-tab-item layui-show";
                document.getElementById("div3").className = "layui-tab-item";
                document.getElementById("div4").className = "layui-tab-item";
                document.getElementById("div5").className = "layui-tab-item";
            } else if ("#test1=333" == location.hash) {
                document.getElementById("div1").className = "layui-tab-item";
                document.getElementById("div2").className = "layui-tab-item";
                document.getElementById("div3").className = "layui-tab-item layui-show";
                document.getElementById("div4").className = "layui-tab-item";
                document.getElementById("div5").className = "layui-tab-item";
            } else if ("#test1=444" == location.hash) {
                document.getElementById("div1").className = "layui-tab-item";
                document.getElementById("div2").className = "layui-tab-item";
                document.getElementById("div3").className = "layui-tab-item";
                document.getElementById("div4").className = "layui-tab-item layui-show";
                document.getElementById("div5").className = "layui-tab-item";
            } else if ("#test1=555" == location.hash) {
                document.getElementById("div1").className = "layui-tab-item";
                document.getElementById("div2").className = "layui-tab-item";
                document.getElementById("div3").className = "layui-tab-item";
                document.getElementById("div4").className = "layui-tab-item";
                document.getElementById("div5").className = "layui-tab-item layui-show";
            }




        });
    });
</script>