eg.Tab 



 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Title</title>
 6   <link rel="stylesheet" href="css/demo.css">
 7 </head>
 8 <style>
 9   #tab_1 {width: 400px;background-color: #bbb;}
10   #tab_1 .tab_head {text-align: center;}
11   #tab_1 .tab_head li {width: 120px;padding: 3px 0;display: inline-block;text-align: center;cursor: pointer;border: 1px solid transparent;border-bottom: none;background-color: #333333;color: #fff;}
12   #tab_1 .tab_head li.hover {border-color: #3c9;}
13   #tab_1 .tab_body {border: 1px solid #333;height: 200px;}
14 </style>
15 <script>
16   function tabFunc(name, cursel, n) {
17     var i;
18     for (i = 1; i <= n; i++) {
19       var menu = document.getElementById(name + i);
20       var tt = document.getElementById('tt_' + name + '_' + i);
21       menu.className = i == cursel ? "hover" : "";
22       tt.style.display = i == cursel ? "block" : "none";
23     }
24   }
25 </script>
26 <body>
27 <div id="tab_1">
28   <div class="tab_head">
29     <ul>
30       <li id="tt_11" onmouseover="tabFunc('tt_1',1,3)" class="hover">html</li>
31       <li id="tt_12" onmouseover="tabFunc('tt_1',2,3)">CSS</li>
32       <li id="tt_13" onmouseover="tabFunc('tt_1',3,3)">JavaScript</li>
33     </ul>
34   </div>
35   <div class="tab_body">
36     <div id="tt_tt_1_1">htmlhtmlhtmlhtmlhtmlhtmlhtml</div>
37     <div id="tt_tt_1_2" style="display:none">CSSCSSCSSCSSCSSCSSCSS</div>
38     <div id="tt_tt_1_3" style="display:none">JavaScriptJavaScriptJavaScriptJavaScriptJavaScript</div>
39   </div>
40 </div>
41 
42 </body>
43 </html>

 

 

posted @ 2017-02-22 23:13  mudeng007  阅读(122)  评论(0)    收藏  举报