tabs模拟多窗口切换

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<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>
 

你可能感兴趣的:(JavaScript,html,jquery,jsp,css)