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

最新推荐文章于 2024-09-20 16:06:21 发布

iteye_19603

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量195

点赞数

文章标签： xhtml javascript ViewUI

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

页面中用到一个图片：

页面代码如下：

Html代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head><title>tabview示例(欢迎访问我的博客：http://wallimn.iteye.com)</title>
<metahttp-equiv=content-typecontent="text/html;charset=GBK">
<scripttype="text/javascript">
functiontabclick(obj){
if(obj.className=='cur')return;
varidx;
for(varn=0;n<obj.parentNode.childNodes.length;n++){
obj.parentNode.childNodes[n].className="";
if(obj==obj.parentNode.childNodes[n])idx=n;
}
obj.className="cur";
varpc=obj.parentNode.nextSibling;
while(pc.nodeType==3)pcpc=pc.nextSibling;
for(varn=0;n<pc.childNodes.length;n++){
pc.childNodes[n].className="hdn";
}
pc.childNodes[idx].className="";
}
</script>
<styletype="text/css">
.debug{
border:1pxsolidred;
}
.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-x0-68px;
height:34px;
}
ul.tabbarli{
float:left;
width:83px;
height:34px;
line-height:34px;
text-align:center;
background:url(tabview.gif);
cursor:pointer;
cursor:hand;
}
ul.tabbarli.cur{
background:url(tabview.gif)0-34px;
}
ul.tabpage{
border-style:ridge;
border-color:#dceefd;
border-width:02px2px2px;
height:302px;
overflow:hidden;
}
ul.tabpageli{
height:300px;
border-width:0;
overflow-y:auto;
}
</style>
</head>
<body>
<ulclass="tabbar">
<listyle="margin-left:1em"class="cur"onclick="tabclick(this)">过滤条件</li>
<lionclick="tabclick(this)">排序条件</li>
<lionclick="tabclick(this)">分　　组</li>
<lionclick="tabclick(this)">计算字段</li>
</ul>
<ulclass="tabpage">
<li>显示过滤条件</li>
<liclass="hdn">显示排序条件</li>
<liclass="hdn">显示分　　组</li>
<liclass="hdn">显示计算字段</li>
</ul>
</body>
</html>