用js+css+jsp做的Tab分页

lz12366

浏览: 420779 次
性别:
来自: 济南

最近访客更多访客>>

rocex

hqb732

sunjor

oznyang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js
样式

<%@ 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>

tab.rar (51.6 KB)
下载次数: 172

分享到：

css中display：inline | 基本CSS选择器

2011-07-21 17:49
浏览 5035
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用js+css+jsp做的Tab分页

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用js+css+jsp做的Tab分页

评论

发表评论

相关推荐

IE中的条件编译

兼容IE和firefox，获得上传文件绝对路径

关于JavaScript中打印jsp对象的问题

另类的实现逻辑问题

（转）实现Ajax请求队列按顺序执行

摘抄--从function的定义看JavaScript的预加载

firefox上传文件

postion和relative

js 自行函数

IE和FF中获取兄弟节点

设置有iframe的页面根据窗口大小自动调整大小

js中style属性以及仿制window.alert()功能和自定义

css区分各个浏览器和css Hack

HTML标签的<button>导致数据在firefox自动提交和在firefox里面弹出div窗口失败

转：Div自适应高度

iframe的属性：document和Document以及Document的属性和iframe在各个浏览器获得内部文档的写法

浏览器加载显示html的顺序

div+ajax实现类似iframe功能

自己写的多表单插入数据和几个form同时提交

谈谈Javascript的this指针

最近访客更多访客>>