layer.tab 的 change 回调可直接获取索引，仅限初始化时配置；页面内普通 tab 需用 element.on('tab(filter)') 监听；动态 iframe 加载应先清空 src 并监听 load 事件；监听失效多因 DOM 渲染时机不当或未重新 render。
layer.tab 的 change 回调能直接拿到索引，但仅限 layer.tab() 初始化时配置
如果你用的是 layer.tab() 打开弹出层（不是手动写 .layui-tab DOM），它原生支持 change 参数回调——这是最简方案，不用查 DOM、不依赖事件委托：
layer.tab({
area: ['800px', '600px'],
tab: [
{title: '用户列表', content: '<div id="tab-user"></div>'},
{title: '日志详情', content: '<div id="tab-log"></div>'}
],
change: function(index, layero) {
console.log('切换到第', index, '个 tab');
// 此处可按 index 加载对应数据
if (index === 0) loadDataForUser();
if (index === 1) loadDataForLog();
}
});注意：这个 change 是 layer.tab 特有的，layer.open 或普通 element.tab 不认它；且只在用户点击标题栏时触发，不响应 element.tabChange 那种编程式切换。
用 element.on('tab(filter)') 监听页面内普通 Tab 切换
如果你在页面里用的是 layui-tab 原生结构（比如初始化了 element.tab({elem: '#demo', ...})），就得走 Element 模块的事件系统：
element.on('tab(demo)', function(data){
console.log('当前激活项索引：', data.index);
// data.index 就是当前 tab 序号，从 0 开始
switch(data.index) {
case 0: loadUserInfo(); break;
case 1: loadAuditLog(); break;
}
});关键点：demo 必须和 HTML 中 lay-filter="demo" 的值完全一致；这个监听需在 layui.use(['element'], ...) 内执行；它对所有 tab 切换都生效（包括 JS 调用 element.tabChange('demo', 1)）。
动态 iframe 内容加载时，别在 change 里直接操作 iframe.src
常见错误是这样写：
change: function(index, layero) {
const iframe = layero.find('iframe').get(0);
iframe.src = '/api/data?tab=' + index; // ❌ 可能触发两次、或 src 被覆盖
}问题在于：iframe 加载是异步的，多次快速切换会导致请求打架、状态错乱。更稳做法：- 先清空旧内容：
layero.find('iframe').attr('src', 'about:blank'); - 加 loading 状态标记，避免重复触发
- 等 iframe
load事件后再渲染真实内容，或改用$.get()+.html()插入纯 HTML - 若必须用 iframe，建议每个 tab 对应独立
id，避免 find 找错目标
监听失效？重点检查 DOM 是否已渲染完成
很多“监听没反应”实际是时机问题：
- 在
layer.open里用success回调绑定click事件，而不是全局$('body').on('click', '.layui-tab-title li', ...)—— 后者容易因 dom 异步插入而漏掉 - 用
$(layero).find('.layui-tab-title li')绑定前，确保layero已存在且非空 - 如果 tab 是动态增删的，每次操作后要重新调用
element.render('tab')，否则新 tab 不会触发tab(demo)事件 - 不要在
change或tab(demo)回调里再调layer.close()或重绘整个 layer，可能中断当前切换流程
