作者 🐼
SpongeBob
-
在iframe中时,需要在对应js文件中引入miniTab
然后是切换左侧菜单的选择样式
```javascript
var el = $("body", parent.document).find("[layuimini-href='" + href + "']", ".layuimini-menu-left");
layer.close(window.openTips);
if (el.length) {
$(el).closest(".layui-nav-tree").find(".layui-this").removeClass("layui-this");
$(el).parent().addClass("layui-this");
}
```
需要注意的是$("body", parent.document),我们需要从iframe中跳出来找到父级中的左侧菜单才可以操作该元素
接下来就是调用layui.tabs的change方法切换菜单即可
```javascript
if (tabId === null || tabId === undefined) tabId = new Date().getTime();
var checkTab = miniTab.check(tabId, true);
if (!checkTab) {
miniTab.create({
tabId: tabId,
href: href,
title: title,
isIframe: true,
maxTabNum: options.maxTabNum,
});
}
tabs.change('layuiminiTab', tabId);
layer.close(loading);
```
这里需要注意的地方
1.tabId就是菜单的链接或者你定义的内容
2.tabs是通过layui.tabs获取的
3.调用miniTab.check检查tab是否已打开,check方法接受两个参数,第一个是tabId,第二个是否是在iframe中操作tabs切换,我们在iframe中需要设置为true,因为这样子才可以从iframe中出来操作DOM
4.如果要打开的菜单未打开,将会调用miniTab.create方法打开菜单.如果菜单已打开,将会调用tabs.change方法打开菜单
miniTab参考文档:
[https://layui.dev/docs/2/tabs/](https://layui.dev/docs/2/tabs/)
