tabs模拟多窗口切换

tabs模拟多窗口切换 %@ page language= java contentType= text/html; charset=UTF-8 pageEncoding= utf-8 % !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN html head link rel= stylesheet href= /pay/css/my.css type= text/css media= screen / link href= /pay/css1/frame.css rel= stylesheet type= text/css / script src= /pay/js/jquery.js type= text/javascript charset= utf-8 /script script src= /pay/js/day.js type= text/javascript charset= utf-8 /script script type= text/javascript charset= utf-8 var tabNames=new Array(); tabNames[0]= 首页 ; var active=-1; $(document).ready(function() { $( #navigation,#text ).css( height ,document.height-parseInt($( .banner ).css( height ))-10); $( #text ).css( width ,document.width-parseInt($( #navigation ).css( width ))-5); $( #text ul ).css( width ,parseInt($( #text ).css( width ))-50); $( .Amain ).click(function(){ var ulNode=$(this).next( ul ); if(ulNode.css( display ) == none ){ ulNode.css( display , block ); }else{ ulNode.css( display , none ); } }); $( #navigation ul li ul li a ).click(function(){ var index=-1; for(i=0; i tabNames.length; i++){ if($(this).html()==tabNames[i]) index=i; } if(index==-1){ //此处把onclick放到 a 标签javascript里，而没将$( .bar li a ).click()做为响应事件去监听，是因为单点击任意一个 a 时，jquery都会挨个查找并挨 个执行$( .bar li a ).click()函数，直到找到为止， //所以那样的话会多执行很多重复的操作。用javascript调用，传递参数 $(this).html()时如果未在前面加“'”号会报未定义错误，和EL达式一样，所以要加 “’”，但是onclick=后就不能在有“'”否则也会报错。 $( .bar ).append( li a href='#' onclick=javascript:BarLi(' +$(this).html()+ '); +$(this).html()+ /a img src='images/cross.png' onclick=javascript:closeBarLi(' +$(this).html()+ '); /img /li ); tabNames.push($(this).html()); $( #text div ).css( display , none ); $( #text ).append( div /div ); $( #text div:last ).load($(this).attr( id )); $( .bar li ).css( background , #ACCEF7 ); $( .bar li:last ).css( background , #708EA8 ); active=tabNames.length-1; }else{ $( #text div ).css( display , none ); $( #text div:eq( +index+ ) ).css( display , block ); $( .bar li ).css( background , #ACCEF7 ); $( .bar li:eq( +index+ ) ).css( background , #708EA8 ); active=index; } return ; }); }); function BarLi(BarLiName){ var index=-1; for(i=0; i tabNames.length; i++){ if(BarLiName==tabNames[i]) index=i; } $( #text div ).css( display , none ); $( #text div:eq( +index+ ) ).css( display , block ); $( .bar li ).css( background , #ACCEF7 ); $( .bar li:eq( +index+ ) ).css( background , #708EA8 ); active=index; index=-1; return false; } function closeBarLi(BarLiName){ var Index=-1; for(i=0; i tabNames.length; i++){ if(BarLiName==tabNames[i]) Index=i; } if(Index==tabNames.length-1) active=Index-1; else if(active==-1 || active tabNames.length-1) active=Index; else if(active Index) active--; tabNames.splice(Index,1); $( #text div:eq( +Index+ ) ).remove(); $( .bar li:eq( +Index+ ) ).remove(); BarLi(tabNames[active]); } /script /head body div id= container div class= banner /div div id= navigation ul li img src= /pay/images/total.png alt= / a class= Amain href= # 人事管理 /a ul li a id= /pay/employe.do href= # 人事档案 /a /li li a id= /pay/duty.do href= # 考勤管理 /a /li li a id= /pay/appraisal.do href= # 考核管理 /a /li li a id= /pay/reward.do href= # 奖惩管理 /a /li li a id= /pay/assessProfession.do href= # 职称评定 /a /li li a id= /pay/goods.do href= # 物品领用 /a /li li a id= /pay/assistInfo.do href= # 辅助信息 /a /li li a id= /pay/relation.do href= # 社会关系 /a /li li a id= /pay/workExperience.do href= # 工作经验 /a /li li a id= /pay/papers/index.jsp href= # 证照管理 /a /li /ul /li li img src= /pay/images/total.png alt= / a class= Amain href= #l 工资管理 /a ul li a id= /pay/accountSet/index.jsp href= # 套帐管理 /a /li li a id= /pay/timeWorkPay.do href= # 计时工资 /a /li li a id= /pay/timeWork.do href= # 计时工种管理 /a /li li a id= /pay/pieceWorkPay.do href= # 计件工资 /a /li li a id= /pay/production.do href= # 产品工序管理 /a /li li a id= /pay/pay/input.jsp href= # 工资表管理 /a /li li a id= href= # 工资表汇总 /a /li li a id= href= # 工资等级 /a /li li a id= href= # 月末处理 /a /li /ul /li li img src= /pay/images/total.png alt= / a class= Amain href= # 综合管理 /a ul li a id= href= # 部门管理 /a /li li a id= href= # 管理 /a /li li a id= /pay/vacation.do href= # 假期管理 /a /li li a id= /pay/evection.do href= # 出差管理 /a /li li a id= href= # 通知管理 /a /li li a id= href= # 会议记录 /a /li li a id= href= # 通讯录 /a /li li a id= href= # 记事本 /a /li /ul /li li img src= /pay/images/total.png alt= / a class= Amain href= # 用户管理 /a ul li a id= href= # 用户管理 /a /li li a id= href= # 权限管理 /a /li /ul /li /ul /div div id= text ul class= bar li a href='#' onclick=javascript:BarLi('首页'); 首页 /a /li /ul div 内容 /div /div /div /body /html