CSS实例(四):实现TabView(页签)效果

  今天花了点时间,设计了一个网页上用的tabview(页签、tabcontrol)效果。个人觉得实现得比较不错,网页元素用得比较少,js代码也比较精练。测试了一下支持IE、FireFox以及chrome。支持同一页面上多处使用。
  没有什么过多说的。先看一下效果。



页面中用到一个图片:




页面代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>tabview示例(欢迎访问我的博客:http://wallimn.iteye.com)</title>
<meta http-equiv=content-type content="text/html; charset=GBK">
<script type="text/javascript">
function tabclick(obj){
	if(obj.className=='cur')return;
	var idx;
	for(var n=0; n<obj.parentNode.childNodes.length; n++){
		obj.parentNode.childNodes[n].className="";
		if(obj==obj.parentNode.childNodes[n])idx=n;
	}
	obj.className="cur";
	var pc = obj.parentNode.nextSibling;
	while(pc.nodeType==3)pc=pc.nextSibling;
	for(var n=0; n<pc.childNodes.length; n++){
		pc.childNodes[n].className="hdn";
	}
	pc.childNodes[idx].className="";
}
</script>
<style type="text/css">
.debug{
	border:1px solid red;
}
.hdn{
	display:none;
}
ul.tabbar,ul.tabpage{
	list-style-type:none;
	margin:0;
	font-size:12px;
	padding:0;
}
ul.tabbar{
	background:url(tabview.gif) repeat-x 0 -68px;
	height:34px;
}
ul.tabbar li{
	float:left;
	width:83px;
	height:34px;
	line-height:34px;
	text-align:center;
	background:url(tabview.gif);
	cursor:pointer;
	cursor:hand;
}
ul.tabbar li.cur{
	background:url(tabview.gif) 0 -34px;
}
ul.tabpage{
	border-style:ridge;
	border-color:#dceefd; 
	border-width:0 2px 2px 2px;
	height:302px;
	overflow:hidden;
}
ul.tabpage li{
	height:300px;
	border-width:0;
	overflow-y:auto;
}
</style>
</head>
<body>
<ul class="tabbar">
	<li style="margin-left:1em" class="cur" onclick="tabclick(this)">过滤条件</li>
	<li onclick="tabclick(this)">排序条件</li>
	<li onclick="tabclick(this)">分  组</li>
	<li onclick="tabclick(this)">计算字段</li>
</ul>
<ul class="tabpage">
	<li>显示过滤条件</li>
	<li class="hdn">显示排序条件</li>
	<li class="hdn">显示分  组</li>
	<li class="hdn">显示计算字段</li>
</ul>
</body>
</html>


03-25进一步简化了代码,仅使用一个js函数;
03-27修正了FF及Chrome浏览器中,对于nextSibling的解释为"\n",然后才是ul,这个很奇怪。

/***********本人原创,欢迎转载,转载请保留本人信息*************/
作者:wallimn 电邮:[email protected] 时间:2009-03-23
博客: http://wallimn.iteye.com
    http://blog.csdn.net/wallimn
网络硬盘:http://wallimn.ys168.com
/***********文章发表请与本人联系,作者保留所有权利*************/

你可能感兴趣的:(浏览器,css,chrome,IE,firefox)