使用背景
针对有多个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
为保证教程的实用性及扩大知识面覆盖，如果您有相似问题而未解决，可联系在线客服免费技术支持。
