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

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

如下图所示:
在这里插入图片描述
说明:菜单栏选卡只有在触发该菜单按钮的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: '<iframe tab-id="'+44+'" frameborder="0" src="'+myjstools.wwwroot+"/fpage/oa/notice/oaNoticeInfo_list.html"+'" scrolling="yes" class="x-iframe"></iframe>'
        ,id: 44
    })
    parent.element.tabChange('xbs_tab',44);  //跳转到该tab
    event.stopPropagation();
});

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

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值