需求:通过全部按钮,切换到代办事项选项卡
如下图所示:
说明:菜单栏选卡只有在触发该菜单按钮的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。如有不同观点,请留言交流。