【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');
  });