必须同步更新内部状态和视图：先用 lay-id 更新缓存标题，再修改 dom 中对应 span 文本，最后调用 element.tabchange() 触发重绘；避免仅改 dom 导致切换异常、右键菜单错乱或索引偏移。
不能只改 DOM 文字，必须同步更新内部状态和视图。Layui 的 Tab 标题修改不是简单替换 innerText，否则切换、右键菜单、删除等操作会出错——标题回退、显示异常或索引错乱都是常见表现。
核心原则：改标题 = 更新数据 + 触发重绘
Layui 没有 tabSetTitle() 这类封装方法，本质是“换配置 + 换视图”。关键在于两点：
- 标题内容必须与 tab 的 lay-id 绑定，而不是靠 DOM 顺序（如
eq(0)）定位 - 修改后要调用
element.tabChange()，它不仅切换激活项，还会稳定标题渲染逻辑
推荐做法：用 lay-id 管理标题变量
添加 tab 时就为每个 tab 设唯一 id，并用 Map 或对象缓存标题：
const tabTitleMap = new Map();
element.tabAdd('demo', {
title: '用户列表',
content: '<div></div>',
id: 'user-list'
});
tabTitleMap.set('user-list', '用户列表');
后续修改标题时：
- 先更新缓存：
tabTitleMap.set('user-list', '用户管理（测试版）') - 再更新 DOM：
$(`.layui-tab-title li[lay-id="user-list"] span`).text(tabTitleMap.get('user-list')) - 最后触发重绘：
element.tabChange('demo', 'user-list')
补充要点：避免踩坑
以下操作不加注意，标题很容易“改了又变回去”：
- 如果 tab 是 iframe 加载的，建议同步设置
iframe.title或通过window.parent通知主页面更新 document.title（可访问性需要） - 批量修改多个 tab 时，别用
$('li').eq(i)遍历——tab 删除/新增会导致下标偏移；始终用lay-id匹配 - 修改后若宽度不适配（文字被截断），可手动调用
element.render('tab')刷新样式（非必需，但保险） - 右键菜单中标题错误？说明只改了 DOM 没更新缓存——Layui 右键菜单读取的是内部映射，不是实时 DOM 文本
双击编辑标题的注意事项
如需支持双击改名，监听要委托到容器：
$('.layui-tab-title').on('dblclick', 'li', function() {
const $li = $(this);
const id = $li.attr('lay-id');
const oldTitle = tabTitleMap.get(id) || $li.find('span').text();
<p>const $input = $(<input type="text">).val(oldTitle).css({
'width': $li.width() - 20 + 'px',
'border': '1px solid #999',
'padding': '2px 6px'
});</p><p>$li.html($input).find('input').focus();</p><p>const save = () => {
const newTitle = $.trim($input.val());
if (newTitle) {
tabTitleMap.set(id, newTitle);
$li.html(<span></span>).find('span').text(newTitle);
element.tabChange('demo', id); // 关键：保持状态一致
} else {
$li.html(<span></span>).find('span').text(oldTitle);
}
};</p><p>$input.on('blur', save).on('keydown', e => e.keyCode === 13 && save());
});
</p>
注意：要移除 user-select: none 样式，否则 input 无法聚焦；也别忘了同步更新对应面板区域（.layui-tab-content .layui-tab-item）里的 dd 标题（如有）。
