Layui实现跳转到指定tab栏 教程

需求背景：实现页面之间的联动跳转，并跳转到指定tab栏；

解决这个方法也很简单，具体教程如下：

步骤1：html代码

<div class="layui-tab layui-tab-brief" lay-filter="laofan_tab">
    <ul class="layui-tab-title">
      <li lay-id=1 class="layui-this">PHP</li>
      <li lay-id=2>html</li>
      <li lay-id=3>python</lilay_id='one'>
      <li lay-id=4>go</li>
    </ul>

    <div class="layui-tab-content">
      <!--tab1-->
      <div class="layui-tab-item layui-show">
        内容1
      </div>
      <!--tab2-->
      <div class="layui-tab-item layui-show">
        内容2
      </div>
      <!--tab3-->
      <div class="layui-tab-item layui-show">
        内容3
      </div>
      <!--tab4-->
      <div class="layui-tab-item layui-show">
        内容4
      </div>
     
    </div>
    
</div> 

在正常选项卡基础上，增加如下代码：

• lay-filter代表地址栏中参数的名称。
• lay-id来作为唯一的匹配索引，以用于外部的定位切换。

步骤2：JS部分

便于你区分参数，特定吧参数名字改了一下

laofantab： 为刚才定义的lay-filter

type 为地址栏的参数名，比如：http://test.com#type=1

<script>

layui.use(['element','jquery'], function(){
    var $ =  layui.jquery,
    element = layui.element;
   
    //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
    var layid = location.hash.replace(/^#type=/, '');
    console.log(layid)
    element.tabChange('laofan_tab', layid); 
    //监听Tab切换，以改变地址hash值
    element.on('tab(laofan_tab)', function(data){
      var testid = $(this).attr("lay-id");
      location.hash = 'type='+ testid;
    });
});

</script>

注意：

官方给的JS方法一直未生效，未作深究，可能是我的代码里那个地方没写对。

//监听Tab切换，以改变地址hash值
  element.on('tab(test1)', function(){
    location.hash = 'test1='+ this.getAttribute('lay-id');
  });