layui通过页面地址传参数，定位指定tab选项卡的方法

使用背景

针对有多个tab的页面，为了用户体验减少点击，希望通过url链接直接定位切换到指定tab选项卡。

代码实现

layui提供了lay-id参数用于外部的定位切换。

<div class="layui-tab" lay-filter="type">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="1" >全部</li>
    <li lay-id="2">源码</li>
    <li lay-id="3">教程</li>
    <li lay-id="4">素材</li>
    <li lay-id="5">前端</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">1</div>
    <div class="layui-tab-item">2</div>
    <div class="layui-tab-item">3</div>
    <div class="layui-tab-item">4</div>
    <div class="layui-tab-item">5</div>
  </div>
</div>

属性 lay-id 是扮演这项功能的主要角色，它是动态操作的重要凭据。

<script>
layui.use('element', function(){
  var element = layui.element;
  
  //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
  var layid = location.hash.replace(/^#type=/, '');
  element.tabChange('type', layid); //假设当前地址为：http://www.zhimatong.com#type=2，那么选项卡会自动切换到“源码”这一项
  
  // Tab 切换，以改变地址 hash 值
  element.on('tab(type)', function(){
    location.hash = 'type='+ this.getAttribute('lay-id');
  });
});
</script>

本文属原创，转载请注明原文：https://www.zhimatong.com/jiaocheng/847.html

为保证教程的实用性及扩大知识面覆盖，如果您有相似问题而未解决，可联系在线客服免费技术支持。