layui Tab切换

layui-html元素

<ul class="layui-tab-title" id="myTab">
	<li class="layui-this" lay-id="demo1">表格列表</li>
	<li lay-id="demo2">数据图表</li>
</ul>

js代码

//Hash地址的定位**页面加载执行哪个tab**
	var layid = location.hash.replace(/^#demo=/, '');
	element.tabChange('demo', layid);
 	if(layid == 'clubTable'){
		element.tabChange('demo', 'clubTable'); //切换到:Tab1
		setClubTable();
	}else if(layid == 'playerTable'){
		element.tabChange('demo', 'playerTable'); //切换到:Tab2
		setPlayerTable();
	}else{
		element.tabChange('demo', 'clubTable'); //切换到:Tab2(默认切换Tab1)
		setClubTable();
	}
	//**点击tab函数**
	element.on('tab(demo)', function(elem) {
		location.hash = 'demo=' + $(this).attr('lay-
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui 是一款优秀的前端 UI 框架,其中提供了很多实用的组件,其中包括 tab 组件。tab 组件可以用于制作选项卡切换效果,用起来非常方便。 使用 layui tab 组件实现切换效果的步骤如下: 1. 引入 layui 的样式文件和相关 JS 文件。 2. 在 HTML 文件中添加 tab 容器,如下: <ul class="layui-nav layui-tab" lay-filter="tab"> </ul> 3. 在 JS 文件中定义 tab 的数据,如下: layui.use(['element', 'layer', 'form', 'jquery', 'tab'], function () { var element = layui.element, layer = layui.layer, form = layui.form, $ = layui.jquery, tab = layui.tab; tab.tabAdd({ title: '选项卡标题', content: '选项卡内容', id: '选项卡ID' }); }); 4. 可以添加多个选项卡,即在上面的函数中多次调用 tabAdd 方法。 5. 设置动态加载选项卡内容的方法,如下: //动态获取选项卡内容 function getTabContent(tabId) { var title = $('#' + tabId).text(); if (title == '选项卡1') { return '选项卡1内容'; } else if (title == '选项卡2') { return '选项卡2内容'; } } 6. 绑定 tab 切换事件,如下: // 利用事件委托方式,新增选项卡切换事件 $(document).on('click', '.layui-tab-title li', function () { var tabId = $(this).attr('lay-id'); var content = getTabContent(tabId); tab.tabChange(tabId); }); 7. 最后在 HTML 文件中添加相应的选项卡,即可实现 tab 切换效果。 以上就是使用 layui tab 组件实现切换效果的主要步骤,具体实现可以根据自己的需要进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值