Layui tab标签页如何设置默认选中的项

layui tab 默认激活页需在初始化完成后调用 element.tabChange('容器名', 'lay-id')；动态添加后须确保所有 tabAdd 完成再执行；避免依赖 DOM 顺序，始终用 lay-id 标识；刷新保持状态需结合 localStorage 读写。

layui tab 怎么用 change 切换默认激活页面

layui 的 tab 组件没有直接的 defaulttab 配置项并不直接控制“默认选中”；其实际机制，是完成初始化便触发一次切换动作。因此，最可靠的做法是在 element.tabadd() 或 element.tabchange() 之后手动调用 element.tabchange() ，并指定 lay-id。

• 必须等待 element.init() 完成后再执行操作，否则 tabChange 不会生效
• 传入的 lay-id 必须与 tabAdd() 时所指定的值完全一致，包括大小写和空格
• 动态生成 tab 时，先用 add 加完所有面板，之后才调用 change

示例：

element.tabAdd('demo', {  title: '用户管理',  content: '<p>内容</p>',  id: 'user'});element.tabChange('demo', 'user'); // 这句才真正激活

在 layui 2.8+ 中 elem.find('.layui-tab-item') 顺序发生错乱怎么办

新版 layui 已经优化 tab 内容的渲染方式，.layui-tab-item 的 DOM 顺序可能不再与添加顺序一致，因此依据索引（如 :eq(0)）设置默认项可能失败。

• 不要使用 $('.layui-tab-item').eq(0).show() 这类 jQuery 方法控制显示与隐藏
• 应始终依据 lay-id 字段，因为它是唯一可靠的标识符
• 如果确实必须按顺序操作，可先通过 $('.layui-tab-title li') 获取标题项，然后根据它的 lay-id 属性反向找到对应内容

tab 默认选中功能失效的三个典型场景

问题通常不在代码本身，而在于执行时机或结构未能对应：

• tab 容器自身添加了 style="display:none" —— 隐藏元素在 layui 初始化阶段不会被处理，等到后续 tabChange 也不会响应
• 页面中存在多个 layui.use(['element'], ...) 块，但 element 实例遭到重复初始化，最终造成事件绑定丢失
• iframe 或异步内容被放进 tab 标签页后，而 tabChange 执行时间过早，此时目标 lay-id 尚未注册到 element 实例中

刷新页面后，怎样保留某个 tab 页此前的选中状态

状态不会由 layui 自动保存，需要自行加入处理逻辑：tab 发生切换时更新键值，并借助 localStorage 完成读取和写入。

• 初始化时先查询 localStorage.getItem('layui_tab_demo_active')，如果存在值就传入 tabChange
• 监听 element.on('tab(demo)', ...)，取得 elem.attr('lay-id') 后保存进去
• 注意：每个 tab 容器都应分配独立的 key，比如 layui_tab_user_active 和 layui_tab_log_active

如果遗漏这一步，用户刷新页面后就会返回第一个 tab，造成非常明显的体验断层。