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

1、第一步：写一个简单的选项卡页面，代码如下：

<ul class="layui-tab-title">

   <li class="layui-this" 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>

效果如图:

2、第二步：定位选项卡的节点，并找到需要修改的属性，比如这里需要修改dt="oo"的值，先找到它，如图：

3、第三步：编写js代码，先获取到节点，在获取到节点的属性值，代码如下：

layui.use(['element'], function () {

   var element = layui.element;

   element.on("tab(test1)", function (data) {
       console.log(data)
       console.log(this); //当前Tab标题所在的原始DOM元素
   })
});

4、第四步：运行上面的代码，然后点击选项卡就可以看，当前的节点dom已经被获取了，如图：

5、第五步：获取到dom后就可以获取属性值了，代码如下：

element.on("tab(test1)", function (data) {

   console.log(this); //当前Tab标题所在的原始DOM元素
   let x = this.getAttribute("dt");
   console.log(x)
})

6、第六步：修改选项卡属性的值，这个就比较简单了，代码如下：

element.on("tab(test1)", function (data) {

   console.log(this); //当前Tab标题所在的原始DOM元素
   let x = this.getAttribute("dt");
   console.log(x)
   this.setAttribute("dt", "uuu");
})