真正能稳定切换的方案是用 div 容器 + 手动绑定点击 + Ajax 按需加载内容，不依赖 iframe；因 layer.tab 默认将 content 当 iframe 渲染，导致跨域报错、DOM 无法访问、jQuery 失效等问题。
直接用 layer.tab 加载 iframe 会卡死或跨域报错，真正能稳定切换的方案是：用 div 容器 + 手动绑定点击 + ajax 按需加载内容，不依赖 iframe。
为什么不能直接用 content: 'xxx.html'？
Layui 的 layer.tab 默认把 content 当作 iframe src 渲染，哪怕你传的是字符串 HTML，它也会尝试塞进 <iframe> —— 导致 DOM 无法访问、jQuery 操作失效、控制台报 Blocked a frame with origin ... from accessing a cross-origin frame。
- 传字符串如
content: '<div id="tab-user"></div>'是可行的，但必须配合 JS 手动填充，不能指望 layer 自动渲染 - 传 URL 如
content: 'user.html'会被强制当 iframe 加载，同域也容易因页面未 ready 就操作而失败 - 想用 iframe？必须确保目标页完全同域、无重定向、不带 query 参数乱跳，且子页要主动调用
parent.layer.getFrameIndex(window)才能关窗
怎么写 loadTabContent 防重复请求+加 loading？
核心是靠 data-loaded 标记 + $.ajax 状态管理，不是简单 if (!loaded) $.get(...) 就完事。
- 每次点击先设
$contentDiv.html('<div class="layui-loading"></div>')，避免空白闪动 - 请求前检查
if ($contentDiv.data('loaded')) return，已加载直接 show，不发请求 - 成功后执行
$contentDiv.data('loaded', true).html(html)，并触发一次layui.form.render()（如果含表单组件） - 失败时回退到提示文本：
$contentDiv.html('<div class="layui-text">加载失败，请重试</div>')
function loadTabContent(tabIndex, $contentDiv) {
const urls = ['user-list.html', 'log-detail.html'];
$.ajax({
url: urls[tabIndex],
type: 'GET',
beforeSend: () => $contentDiv.html('<div class="layui-loading"></div>'),
success: html => $contentDiv.data('loaded', true).html(html),
error: () => $contentDiv.html('<div class="layui-text">加载失败，请重试</div>')
});
}
如何正确监听 tab 切换并手动激活？
element.on('tab(filter)') 在 layer.tab 里根本不会触发 —— 因为弹层是独立 DOM 片段，不走 layui 的模块事件流。
- 必须在
success回调里操作：success: function(layero, index) { ... } - 用委托绑定：
$(layero).find('.layui-tab-title').on('click', 'li', function(){...}) - 获取当前索引别用
data.index，改用$(this).index()或$('.layui-this').index() - 切换后必须手动同步 UI 状态：
$(this).addClass('layui-this').siblings().removeClass('layui-this')和$contentDiv.addClass('layui-show').siblings().removeClass('layui-show')
最易被忽略的是：layer 内部没有维护 tab 激活状态，所有 DOM 显隐、class 切换、loading 控制都得自己写全；少一步，比如没清掉上一个 tab 的 layui-show，就会出现两个 tab 同时显示。
