当前位置：首页> 正文

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

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

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

 

用到的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[i].className = "normal"; 
 document.getElementById(tabObj+"_Content"+i).style.display = "none"; 
 } 
 } 
} 
</script>

 

完整页面： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 
"http://imgbuyun.weixiu-service.com/up79/202111/aqcollg11vw.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[i].className = "normal"; 
 document.getElementById(tabObj+"_Content"+i).style.display = "none"; 
 } 
 } 
} 
</script> 
</head> 
<body> 
<div align="center" style="padding-left:25px;"> 
<!-- 选项卡0开始 --> 
<div class="nTab"> 
<!-- 标题开始 --> 
<div class="TabTitle"> 
<ul id="myTab0"> 
<li class="active" onmouseover="nTabs(this,0);">易看首页</li> 
<li class="normal" onmouseover="nTabs(this,1);">易看阅读</li> 
<li class="normal" onmouseover="nTabs(this,2);">易看鉴赏</li> 
<li class="normal" onmouseover="nTabs(this,3);">易看商城</li> 
<li class="normal" onmouseover="nTabs(this,4);">易看下载</li> 
<li class="normal" onmouseover="nTabs(this,5);">易看问答</li> 
</ul> 
</div> 
<!-- 内容开始 --> 
<div class="TabContent"> 
<div id="myTab0_Content0"> <a href="http://www.6699fa.cn" 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>

 

展开全文阅读
鼠标导航栏程序修改网络滑动门

内容头条

相关内容