179 次浏览【转载需注明来源】
博客作者:【qiang】
除了静态选项卡之外,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); </脚本>
代码效果展示:
知识点:
1、使用js操作选项卡,必须在选项卡加上属性 lay-筛选器;
2、选项卡选项都要设置属性 lay-id ,js才能对选项卡的选项操作;
点击此处跳转案例下载:点击下载lay-选项卡动态操作实例
不能恶意举报,否则进行封号处理!
测试账号