【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');
});
欢迎做技术的朋友一起沟通交流!伸手党请绕道,
代码改变世界QQ群:453011886