用js+css+jsp作的Tab分页 _HTML/CSS

用js+css+jsp做的Tab分页

<%@ page language="java" contentType="text/html; charset=Shift_JIS"
    pageEncoding="Shift_JIS"%>
<%@ taglib uri="/WEB-INF/cop.tld" prefix="cop"%>
<cop:iniCtx id="ctx" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
	<script type="text/javascript" src="<%=ctx%>/js/common.js"></script>
	<link href="<%=ctx%>/css/default.css" rel="stylesheet" type="text/css">
<style>

下面紧接着是css代码

有几个问题需要注意、、

引用

1.1处为div的高度，为了实现Tab页的效果，得让li（2处）+margin(3)==div的高度
2.border占高度覆盖div边框的问题。。

.demo .mainNavg {
	height: 35px;  //1
	border:1px solid #AAAAAA;
	background-color: #cccccc;
}
.demo .mainNavg UL {
	margin: 0;
	padding: 0;
	list-style: none;
}
.demo .mainNavg UL LI {
	float: left;	
	background-color: #E3E3E3;
	margin: 5px 3px;//3
	height: 30px;  //2
}
.mainNavg UL LI A {//---10（.demo .mainNavg UL LI A）
	display: block;
	width:70px;
	height: 20px;  //4
	padding: 5px 20px;

//4   上下padding为5，则一共为10，加上height则和li高度一样

	line-height: 24px;
	text-decoration: none;
	float: left;
	text-align:center;
	font-weight:thin;	
	outline:none;
	text-decoration: none;
 	}
.demo .showTabDiv {
	margin:5px;
	height: 90%;
	float:left;
	width:100%;
}
.demo .nowShowA{
	background:#fff;
	border:1px solid #AAAAAA;
	border-bottom:0 none;
	color: #000;
}
.demo .otherA{
	color: #000;
	background:#e1e1e1;
	height:19px;
	border:1px solid #cccccc;

//因为border也是占高度的，所以otherA会覆盖掉div的border。。。这就是 问题所在
//怎么办呢？？
// 设置高度为19，加上1，正好为20.
//但又出现一个问题。。若10处为注释后面的写法，则会发现，在这设置高度不起作用。。
//为什么呢？？因为css选择器也有权值。。。也就是优先级
//html选择器，权重为1；类选择器，权重为10；id选择器，权重为100； 
//一个css出现多个是则累加。。例如p.note em.dark{color:grag}  权重为22 
//所以改成上面的形式。。去掉一个id选择器，优先级就会小于这里的选择器、、
//则height就会起作用了、、

	border-bottom:0px none;
}
.demo .otherA:hover{
	border-color:#AAAAAA;
	background:#ededed;
	border-bottom:0px none;
	
}

.demo .showTabDiv UL {
	position: absolute;
	left: 0px;
	margin: 0 5px;
	padding: 0px;
	list-style: none;
	float: left;
}
}
</style>

<script>
function changeTab(index)
{
	document.getElementById("tabs-"+index).style.display="block";	
	document.getElementById("tab_a-"+index).className="nowShowA";
	var i=1;
	while(document.getElementById("tabs-"+i))
	{
		if(i!=index){
		clearDisplay(i);
		document.getElementById("tab_a-"+i).className="otherA";
		}
		i++;
	}
}
function clearDisplay(index)
{
	document.getElementById("tabs-"+index).style.display="none";
}

</script>
<title>Interstage Interaction Manager 管理コンソ┼ル</title>
</head>
<body>
<div class="demo">

	<div id="tabs3" class="mainNavg">
		<ul>
			<li><a id="tab_a-1" href="#" onclick="changeTab(1)" class="nowShowA" onfocus="this.blur()">セキュリティ</a></li>
			<li><a id="tab_a-2" href="#" onclick="changeTab(2)" class="otherA" onfocus="this.blur()">カスタマイズ</a></li>
		</ul>
	</div>
	<div id="tabs-1" class="showTabDiv" style='display:block;'>
			<%@include file="security.jsp"%>
	</div>
	<div id="tabs-2" class="showTabDiv" style='display:none;float:left;width:100%'>
		<%@include file="customize.jsp"%>
	</div>
</div>
</body>
</html>