【Layui】实现跳转到指定tab栏

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

解决方法：
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');
  });