Js Tab页（二）

出自：http://wallimn.iteye.com/blog/353867

一个网页上用的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>

posted on 2014-11-03 16:00 绯儿阅读(253) 评论(0) 编辑收藏举报