选项卡点击导航图片改变效果 谁有类似这个网站的http://www.baiduchuan.com效果的代码可以发我一份吗,谢谢! 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!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(页签)效果</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(images/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(images/tabview.gif); cursor:pointer; cursor:hand; } ul.tabbar li.cur{ background: url(images/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> <div style=" width:1000px;"><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> <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> <li class="hdn">显示计算字段</li> <li class="hdn">显示计算字段</li> <li class="hdn">显示计算字段</li> </ul> </div> </body> </html> JS高手进,帮我解答下谢谢 网页一打开时或关闭时就提示设置主页的javasrcipt为什么执行没有效果? (在线等)求教<s:test>问题!~~~ checkbox选中与不选中后的显示问题 flash与js的转换 求急救!jQuery追加元素刷新页面后消失 [帮忙]让我头疼的多层Iframe函数调用问题 各位兄弟帮忙, javascript 函数与页面元素(难度问题) netscape 中的难题 Dtree 如何实现2000 左右的节点 JS问题
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>实现TabView(页签)效果</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(images/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(images/tabview.gif);
cursor:pointer;
cursor:hand;
}
ul.tabbar li.cur{
background: url(images/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>
<div style=" width:1000px;">
<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>
<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>
<li class="hdn">显示计算字段</li>
<li class="hdn">显示计算字段</li>
<li class="hdn">显示计算字段</li>
</ul>
</div>
</body>
</html>