用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代码
有几个问题需要注意、、
.demo .mainNavg {height: 35px; //1border: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;//3height: 30px; //2}.mainNavg UL LI A {//---10（.demo .mainNavg UL LI A）display: block;width:70px;height: 20px; //4padding: 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 href="#" onclick="changeTab(1)" onfocus="this.blur()">セキュリティ</a></li><li><a id="tab_a-2" href="#" onclick="changeTab(2)" onfocus="this.blur()">カスタマイズ</a></li></ul></div><div id="tabs-1" style='display:block;'><%@include file="security.jsp"%></div><div id="tabs-2" style='display:none;float:left;width:100%'><%@include file="customize.jsp"%></div></div></body></html>