Layui 菜单与选项卡绑定

描述：左侧菜单menu与右边选项卡tab绑定，点击menu，右边的tab就在iframe展示，反过来，当切换相应的tab时，左边的menu就对应的展开，接下来，我们来实现这个效果。

左边菜单

菜单与选项卡选项互相绑定

$(function(){
    layui.use('element', function(){
        var element = layui.element;
        var $ = layui.jquery;

        // 左侧菜单dd标签点击事件，.huan-menu为每个dd标签的class
        $("body").on("click", ".huan-menu", function (e) {
            var url="";
            url = $(this).data("url");
            var id = $(this).data("id");
            var text = $(this).text();

            //如果不存在，就在右侧选项卡中增加一个选项
            if ($(".layui-tab-title").find("li[lay-id='" + id + "']").length <= 0) {
                var height = document.documentElement.clientHeight - 160 + "px";
                element.tabAdd('demo', {
                    title: text,
                    //iframe子页面onload新增监听src为/loginPage是父页面跳转/loginPage，解决“俄罗斯套娃”问题
                    content: "<iframe id='main_self_frame' name='main_self_frame' class='main_self_frame' width='100%' height='" + (height) + "' frameborder='0' scrolling='auto' src='" + url + "'></iframe>",
                    id: id
                });
            }
            // 如果存在，就切换到选项卡对应对应的选项
            element.tabChange('demo', id);
        });

        // 监听home.html选项卡lay-filter="demo"
        element.on('tab(demo)', function(data){
            var layId = $(this).attr('lay-id');
            // 将选中的选项卡的layId赋值给iframe的src
            document.getElementById("main_self_frame").src=layId;
            var menuDd = $(".layui-nav-tree .layui-nav-item .layui-nav-child dd");
            $.each($(".huan-menu"), function () {
                //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                var id = $(this).data("id");
                if (layId == id) {
                    if(menuDd.find("a[id='"+layId+"']").length <= 0) {
                        menuDd.find("a[id !='"+layId+"']").parent().removeClass("layui-this");
                        menuDd.find("a[id !='"+layId+"']").parents("dl").removeClass("layui-nav-itemed");
                        menuDd.find("a[id !='"+layId+"']").parents("li").removeClass("layui-nav-itemed");
                    }
                    // 先移除原来菜单和选项卡选项的效果，不然会叠加选中，之后再具体选中具体东西
                    menuDd.removeClass("layui-this");
                    menuDd.find("a[id='"+layId+"']").parents("dl").removeClass("layui-nav-itemed");
                    menuDd.find("a[id='"+layId+"']").parents("li").removeClass("layui-nav-itemed");
                    menuDd.find("a[id='"+layId+"']").parents("dl").addClass("layui-nav-itemed");
                    menuDd.find("a[id='"+layId+"']").parents("li").addClass("layui-nav-itemed");
                    menuDd.find("a[id='"+layId+"']").parent().addClass("layui-this");
                    // 找到选项卡对应左侧的菜单就中断遍历
                    return false;
                } else {
                    menuDd.find("a[id !='"+layId+"']").parent().removeClass("layui-this");
                    menuDd.find("a[id !='"+layId+"']").parents("dl").removeClass("layui-nav-itemed");
                    menuDd.find("a[id !='"+layId+"']").parents("li").removeClass("layui-nav-itemed");
                    return true;
                }
            });
        });
    });
});