通过按钮click事件跳转到菜单栏某一个菜单tab页

需求:通过全部按钮,切换到代办事项选项卡

如下图所示:
通过按钮click事件跳转到菜单栏某一个菜单tab页_第1张图片
说明:菜单栏选卡只有在触发该菜单按钮的click事件后才会生成

菜单列表选项卡生成代码如下:

 $('.left-nav #nav li').click(function (event) {   //菜单列表的click事件
        if($(this).children('.sub-menu').length){    //判断是否是一级菜单
            if($(this).hasClass('open')){       //如果是一级菜单,判断是否是打开状态
            	//如果是,那么则关闭该一级菜单
                $(this).removeClass('open');
                $(this).find('.nav_right').html('');
                $(this).children('.sub-menu').stop().slideUp();
                $(this).siblings().children('.sub-menu').slideUp();
            }else{
            	//如果不是打开状态,那么则将该菜单打开
                $(this).addClass('open');
                $(this).children('a').find('.nav_right').html('');
                $(this).children('.sub-menu').stop().slideDown();
                $(this).siblings().children('.sub-menu').stop().slideUp();
                $(this).siblings().find('.nav_right').html('');
                $(this).siblings().removeClass('open');
            }
        }else{
			//不是一级菜单
            var url = $(this).children('a').attr('_href');
            var title = $(this).find('cite').html();
            var index  = $('.left-nav #nav li').index($(this));
			//获取所有tab判断是否已经生成该菜单的tab
            for (var i = 0; i <$('.x-iframe').length; i++) {
                if($('.x-iframe').eq(i).attr('tab-id')==index+1){  //如果生成了该菜单tab,那么直接跳转到该菜单
                    tab.tabChange(index+1);
                    event.stopPropagation();
                    return;
                }
            };
			//如果没生成该菜单tab,那么将先生成该菜单tab后,跳转到该tab
            tab.tabAdd(title,myjstools.wwwroot + url,index+1);
            tab.tabChange(index+1);
        }
        event.stopPropagation();
    })

如上代码所示,我们可以知道首页按钮要想跳转到指定的菜单tab中,就要先知道该菜单的标题、页面路径、tab-id,然后先判断是否已经生成了该菜单的tab,如果生成直接跳转到该tab,没生成则先生成tab后跳转到该tab。
代码如下:

$("#noticeList").click(function (event) {
    var $ = window.parent.layui.jquery; //获取父页面的jquery对象
    for (var i = 0; i <$('.x-iframe').length; i++) {
        if($('.x-iframe').eq(i).attr('tab-id')==44){  //判断是否已经生成tab,生成则直接跳转到该tab
            parent.element.tabChange('xbs_tab',44);
            event.stopPropagation();
            return;
        }
    };
    //生成指定菜单tab
    parent.element.tabAdd('xbs_tab', {
        title: '通知通告'
        ,content: ''
        ,id: 44
    })
    parent.element.tabChange('xbs_tab',44);  //跳转到该tab
    event.stopPropagation();
});

以上即可做到两边互不影响的切换菜单tab。如有不同观点,请留言交流。

你可能感兴趣的:(自己总结)