实现TabView(页签)效果

最新推荐文章于 2021-06-06 22:09:24 发布

iteye_5347

最新推荐文章于 2021-06-06 22:09:24 发布

阅读量205

点赞数

分类专栏： web JS 文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/iteye_5347/article/details/82573412

版权

web 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

页面中用到一个图片：

页面代码如下：

     Html代码   
     
   
<!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)pcpc=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　电邮：wallimn@sohu.com　时间：2009-03-23
博客：http://wallimn.iteye.com
　　　http://blog.csdn.net/wallimn
网络硬盘：http://wallimn.ys168.com
/***********文章发表请与本人联系，作者保留所有权利*************/

iteye_5347

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现TabView(页签)效果

页面中用到一个图片：页面代码如下： Html代码 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="htt...
复制链接

扫一扫

专栏目录