js鼠标滑过导航菜单出现相应的内容

如下图：js实现：当鼠标经过网站设计出现网站设计相关内容，当鼠标经过平面出现平面的内容

html代码：

 1 <div id="header">
 2   <ul>
 3     <li onmouseover="gaibian(1)">
 4       <h1>网站设计开发</h1>
 5     </li>
 6     <li onmouseover="gaibian(2)">
 7       <h1>平面商业设计</h1>
 8     </li>
 9     <li onmouseover="gaibian(3)">
10       <h1>室内装饰设计</h1>
11     </li>
12   </ul>
13 </div>
14 <div id="content">
15   <ul id="tb1" style="display:block">
16     <li>9月8日网页全科班开课计划！</li>
17     <li>9月8日网页全科班开课计划！</li>
18     <li>9月8日网页全科班开课计划！</li>
19   </ul>
20 
21   <ul id="tb2" style="display:none">
22     <li>9月9日平面高级班开课计划！</li>
23     <li>9月9日平面高级班开课计划！</li>
24     <li>9月9日平面高级班开课计划！</li>
25   </ul>
26 
27   <ul id="tb3" style="display:none">
28     <li>9月10日室内基础班开课计划！</li>
29     <li>9月10日室内基础班开课计划！</li>
30     <li>9月10日室内基础班开课计划！</li>
31   </ul>
32 </div>

View Code

css代码：

 1 <style type="text/css">
 2 * { margin:0; padding:0;}
 3 body {
 4     font-family:Verdana, Arial, Helvetica, sans-serif;
 5     font-size:12px;
 6 }
 7 ul {
 8     list-style:none;
 9 }
10 
11 
12 #header {
13     margin:0 auto;
14     height:30px;
15     width:400px;
16     border:1px solid;
17 }
18 #header li {
19     float:left;
20     padding:5px 20px;
21 }
22 #header li h1 {
23     font-size:14px;
24     color:#ccc;
25 }
26 
27 
28 #content {
29     margin:0 auto;
30     height:70px;
31     width:400px;
32     border:1px solid;
33     line-height:20px;
34 }
35 #content li { padding-left:20px;}
36 </style>

View Code

js代码：

 1 <script type="text/javascript">
 2 function gaibian(n) {
 3     var leng=document.getElementById("header").getElementsByTagName("li").length;
 4     for (var i = 1; i <= leng; i++){
 5         if (i == n) {
 6             document.getElementById("tb"+i).style.display = "block";
 7         }else {
 8             document.getElementById("tb"+i).style.display = "none";
 9         }
10     }
11 }
12 </script>

View Code

 

转载于:https://www.cnblogs.com/ityz/p/4937817.html