当前博客：26-快码FOF中文编程layui教学-组件：Tab选项卡动态操作

178 次浏览【转载需注明来源】

收藏内容 (0) (0)

个性签名：请输入个性签名___________

除了静态选项卡之外，layui还内置了选项卡的动态操作，新增选项卡，删除选项卡，跳转选项卡等。

这是选项卡操作的代码示例：

<区块 类名="lay-选项卡 lay-选项卡-卡片风" lay-过滤器="演示">
	<无序列表 类名="lay-选项卡-标题">
		<列表项 类名="lay-选中" lay-id="111">网站设置</列表项>
		<列表项 lay-id="222">商品管理</列表项>
		<列表项 lay-id="333">订单管理</列表项>
	</无序列表>
	<区块 类名="lay-选项卡-内容">
		<区块 类名="lay-选项卡-项目 lay-显示">内容1</区块>
		<区块 类名="lay-选项卡-项目">内容2</区块>
		<区块 类名="lay-选项卡-项目">内容3</区块>
	</区块>
</区块>
<脚本>
	// 切换选项卡
	lay_元素.选项卡切换("演示", "222");
	// 添加选项卡项目
	lay_元素.选项卡添加("演示", {
		[lay_元素.选项卡配置.id]: "444",
		[lay_元素.选项卡配置.标题]: "xx管理",
		[lay_元素.选项卡配置.内容]: "内容4",
	});
	// 5秒后删除选项卡项目
	倒计时执行(() => {
		lay_元素.选项卡删除("演示", "333");
	}, 5000);
</脚本>

代码效果展示：