layer.tab 的 change 回调仅在初始化时有效且只响应用户点击，动态增删 tab 后索引易错位；页面内 element.tab 需用 element.on('tab(filter)') 监听，两者事件机制完全隔离，DOM 查询才是兜底方案。
能监听，但方式取决于你用的是 layer.tab 弹窗还是页面内 element.tab —— 两者 api 完全不互通，混用必失效。
layer.tab 的 change 回调只在初始化时有效
如果你调用的是 layer.tab() 打开弹层，它原生支持 change 参数，且会传入 index 和 layero：
layer.tab({
tab: [
{title: '用户', content: '<div id="tab-user"></div>'},
{title: '日志', content: '<div id="tab-log"></div>'}
],
change: function(index, layero) {
console.log('当前 tab 索引：', index); // ✅ 正确拿到 0 或 1
if (index === 0) loadData('user');
if (index === 1) loadData('log');
}
});
-
change只在用户点击标题栏时触发，不响应element.tabChange()这类编程式切换 - 这个回调仅对
layer.tab()有效，layer.open()或普通 DOM tab 完全不认它 - 如果 tab 是动态增删的（比如后续调用
layer.tabAdd()），change不会自动适配新增项，索引可能错位
element.on('tab(filter)') 监听页面内原生 tab
如果你在 HTML 里写了 <div class="layui-tab" lay-filter="demo">，就得用 Element 模块的事件系统：
<pre class="brush:php;toolbar:false;">layui.use(['element'], function(){
var element = layui.element;
element.on('tab(demo)', function(data){
console.log('激活项索引：', data.index); // ✅ data.index 是数字，从 0 开始
});
});</pre>
<ul>
<li>
<code>demo 必须和 HTML 中 lay-filter="demo" 的值完全一致，大小写敏感
element.tabChange('demo', 1)、甚至 JS 触发的 class 切换layui.use 包裹，否则 element 未定义src——容易因 DOM 渲染时机导致重复加载或 src 被覆盖layer.tab 切换后手动读 DOM 获取当前索引
当 layer.tab() 的 change 不可用（比如你用的是老版本或自定义结构），最稳的方式是等 DOM 渲染完再查：
layer.open({
type: 1,
content: '<div class="layui-tab">...</div>',
success: function(layero, index) {
// 确保 tab 已渲染完成
layer.ready(function(){
var currentIndex = $(layero).find('.layui-tab-title .layui-this').index();
console.log('当前激活 tab 索引：', currentIndex); // ✅ 总是准确
});
}
});
- 不要用
$('.layui-tab-content .layui-show').index()，内容区可能有隐藏元素干扰结果 - 动态增删 tab 后，必须等
layer.ready()或微任务（如setTimeout(() => {}, 0)）再读 DOM - 如果绑定 click 事件委托，务必挂到
layero上，而不是全局document，否则新弹层 DOM 不会被捕获
真正容易被忽略的点是：layer.tab 和 element.tab 的事件机制毫无关系，一个用了另一个的监听就完全无效；而且 change 回调里的 index 并非总是可靠——尤其在 tab 动态变化后，DOM 查询才是唯一兜底手段。
