layui Tab切换

最新推荐文章于 2025-03-28 19:24:56 发布

写代码要简单一点

最新推荐文章于 2025-03-28 19:24:56 发布

阅读量2.7k

点赞数

分类专栏： Layui-项目实践

本文链接：https://blog.youkuaiyun.com/weixin_41128842/article/details/103669579

版权

Layui-项目实践专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何利用layui框架中的html元素和JavaScript代码实现Tab切换效果。通过示例代码，详细解析了创建和切换Tab的步骤，帮助读者掌握layui的Tab功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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-id');
		if ($(this).hasClass("layui-this") && $(this).hasClass('hasData')) {
			return false;
		}
		if(elem.index == 0){
			var index = layer.load(1, {shade: [0.1,'#fff'] });//假加载
			setTimeout(function(){ layer.close(index); }, 500);
			setClubTable();
		}else{
			var index = layer.load(1, {shade: [0.1,'#fff'] });
			setTimeout(function(){ layer.close(index); }, 500);
			setPlayerTable();
		}
	});