鼠标经过导航栏改变页面的内容

younglibin · 发表于 2013-2-7 20:53:59

用到的css：
<style type="text/css"> body{ color: #000; font-family: "宋体", arial; font-size: 12px; background: #fff; text-align: center; margin: 0; } .nTab{ float: left; width: 960px; margin: 0 auto; border-bottom:1px #AACCEE solid; background:#d5d5d5; background-position:left; background-repeat:repeat-y; margin-bottom:2px; } .nTab .TabTitle{ clear: both; height: 22px; overflow: hidden; } .nTab .TabTitle ul{ border:0; margin:0; padding:0; } .nTab .TabTitle li{ float: left; width: 70px; cursor: pointer; padding-top: 4px; padding-right: 0px; padding-left: 0px; padding-bottom: 2px; list-style-type: none; } .nTab .TabTitle .active{ background:#fff; border-left:1px #AACCEE solid; border-top:1px #AACCEE solid; border-right:1px #AACCEE solid; border-bottom:1px #fff solid; } .nTab .TabTitle .normal{ background:#EBF3FB; border:1px #AACCEE solid; } .nTab .TabContent{ width:auto;background:#fff; margin: 0px auto; padding:10px 0 0 0; border-right:1px #AACCEE solid;border-left:1px #AACCEE solid; } .none {display:none;} </style> 用到的js函数：
<script type="text/javascript"> function nTabs(thisObj,Num){ alert(thisObj.className);if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <tabList.length; i++){ if (i == Num){ thisObj.className = "active"; document.getElementById(tabObj+"_Content"+i).style.display = "block"; }else{ tabList.className = "normal"; document.getElementById(tabObj+"_Content"+i).style.display = "none"; } } } </script>

完整页面：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滑动门（舌签）完美版 - 易看网络</title> <style type="text/css"> body{ color: #000; font-family: "宋体", arial; font-size: 12px; background: #fff; text-align: center; margin: 0; } .nTab{ float: left; width: 960px; margin: 0 auto; border-bottom:1px #AACCEE solid; background:#d5d5d5; background-position:left; background-repeat:repeat-y; margin-bottom:2px; } .nTab .TabTitle{ clear: both; height: 22px; overflow: hidden; } .nTab .TabTitle ul{ border:0; margin:0; padding:0; } .nTab .TabTitle li{ float: left; width: 70px; cursor: pointer; padding-top: 4px; padding-right: 0px; padding-left: 0px; padding-bottom: 2px; list-style-type: none; } .nTab .TabTitle .active{ background:#fff; border-left:1px #AACCEE solid; border-top:1px #AACCEE solid; border-right:1px #AACCEE solid; border-bottom:1px #fff solid; } .nTab .TabTitle .normal{ background:#EBF3FB; border:1px #AACCEE solid; } .nTab .TabContent{ width:auto;background:#fff; margin: 0px auto; padding:10px 0 0 0; border-right:1px #AACCEE solid;border-left:1px #AACCEE solid; } .none {display:none;} </style> <script type="text/javascript"> function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <tabList.length; i++){ if (i == Num){ thisObj.className = "active"; document.getElementById(tabObj+"_Content"+i).style.display = "block"; }else{ tabList.className = "normal"; document.getElementById(tabObj+"_Content"+i).style.display = "none"; } } } </script> </head> <body> <div align="center" style="padding-left:25px;">  <div class="nTab">  <div class="TabTitle"> <ul id="myTab0"> <li class="active" >易看首页</li> <li class="normal" >易看阅读</li> <li class="normal" >易看鉴赏</li> <li class="normal" >易看商城</li> <li class="normal" >易看下载</li> <li class="normal" >易看问答</li> </ul> </div>  <div class="TabContent"> <div id="myTab0_Content0"> <a href="http://www.eslook.com" target="_blank">欢迎光临易看网络 </a></div> <div id="myTab0_Content1" class="none">易看阅读，网页教程，程序修改</div> <div id="myTab0_Content2" class="none">站在巨人的肩膀之上可以使我们看得更远</div> <div id="myTab0_Content3" class="none">您可以购买本站商器来支持易看</div> <div id="myTab0_Content4" class="none">工欲其善，必先利其器</div> <div id="myTab0_Content5" class="none">有啥问题，敬请提问</div> </div> </div> </div> </body> </html>

		自动登录	找回密码
密码			立即注册