出自：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; 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-0 2px 2px 2px; height:302px; overflow:hidden; } ul.tabpage li{ height:300px; border-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>