用js+css+jsp作的Tab分页
日期：2014-05-17 浏览次数：20604 次
用js+css+jsp做的Tab分页
下面紧接着是css代码
有几个问题需要注意、、
1.1处为div的高度，为了实现Tab页的效果，得让li（2处）+margin(3)==div的高度
2.border占高度覆盖div边框的问题。。
<%@ 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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
