« 我的奥运旅程为德国的一家购物网站设计了一个logo »
September 17 2008

js+css的鼠标经过下来(精简版)

Tags: 鼠标经过的菜单   2lengzi @ 10:51

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0; border:0; font-family:verdana, Tahoma, Arial, "宋体"; text-align:left; line-height:150%; font-size:12px}
img{float:left; border:0}
div,table{ float:left; width:auto; height:auto; overflow:hidden; word-wrap:break-word; word-break:break-all;}
body { margin:0 auto 0;}
a {color: #333;text-decoration:none}
a:hover {color:red;text-decoration:none}
ul,li{ list-style:none;}
.divconnet{ width:500px; margin:0 0 0 50px; border:1px #666 solid;}
.divnav{ width:500px; height:30px; background:#ccc;  }
.divnavA{ width:60px; height:30px; height:150%;background:#ccc; color:#666; text-align:center;}
.divnavA a{ width:60px;color:#666;}
.divnavB { width:60px; height:30px;color:#069; font-weight:bold; background:#fff; text-align:center;cursor: hand;}
.diavmain{ width:480px; font-size:14px; color:#f30; padding:10px;}
</style>
<SCRIPT type=text/javascript>
  //<![CDATA[
   function shownav(k,h){
   for(var i=0;i<6;i++){document.getElementById("main_"+k+i).style.display="none";}
   for(var i=0;i<6;i++){document.getElementById("navtitle_"+k+i).className="divnavA";}
   document.getElementById("navtitle_"+k+h).className="divnavB";
   document.getElementById("main_"+k+h).style.display="block";
  }
</SCRIPT>

</head>

<body>
<div class="divconnet">
<div class="divnav">
<div class="divnavB" id="navtitle_10" onmouseover="shownav(1,0);">标题1</div>
<div class="divnavA" id="navtitle_11" onmouseover="shownav(1,1);">标题2</div>
<div class="divnavA" id="navtitle_12" onmouseover="shownav(1,2);">标题3</div>
<div class="divnavA" id="navtitle_13" onmouseover="shownav(1,3);">标题4</div>
<div class="divnavA" id="navtitle_14" onmouseover="shownav(1,4);">标题5</div>
<div class="divnavA" id="navtitle_15" onmouseover="shownav(1,5);">标题6</div>
</div>
<div class="diavmain" id="main_10">内容1</div>
<div class="diavmain" id="main_11" style="display:none">内容2</div>
<div class="diavmain" id="main_12" style="display:none">内容3</div>
<div class="diavmain" id="main_13" style="display:none">内容4</div>
<div class="diavmain" id="main_14" style="display:none">内容5</div>
<div class="diavmain" id="main_15" style="display:none">内容6</div>


</div>
</body>
</html>

  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。