如何修改layui选项卡的title属性

2024-10-12 21:13:45

1、第一步:写一个简单的选项卡页面,代码如下:<ul class="layui颍骈城茇-tab-title"> <li class="layui-th足毂忍珩is" lay-id="xxx" dt="oo">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li></ul><div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容1</div> <div class="layui-tab-item">内容2</div> <div class="layui-tab-item">内容3</div> <div class="layui-tab-item">内容4</div> <div class="layui-tab-item">内容5</div></div>效果如图:

如何修改layui选项卡的title属性

3、第三步:编写js代码,先获取到节点,在获取到节点的属性值,代码如下:layui.use(['element'], function () { var element = layui.element; element.on("tab(test1)", function (data) { console.log(data) console.log(this); //当前Tab标题所在的原始DOM元素 })});

如何修改layui选项卡的title属性

5、第五步:获取到dom后就可以获取属性值了,代码如下:element.on("tab(test1)", function (data) { console.log(this); //当前Tab标题所在的原始DOM元素 let x = this.getAttribute("dt"); console.log(x)})

如何修改layui选项卡的title属性

6、第六步:修改选项卡属性的值,这个就比较简单了,代码如下:element.on("tab(test1)", function (data) { console.log(this); //当前Tab标题所在的原始DOM元素 let x = this.getAttribute("dt"); console.log(x) this.setAttribute("dt", "uuu");})

如何修改layui选项卡的title属性
猜你喜欢