您的位置：首页 > Web前端 > JavaScript

HTML+JS+DOM【选项卡自动切换】

2016-10-28 13:13 323 查看

最终效果图（鼠标无操作会自动切换选项卡）：

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="gb2312" />
5 <title>无标题文档</title>
6 <style>
7 body, ul, li {
8     font-family:"黑体";
9     margin:0;
10     padding:0;
11 }
12 ul, li {
13     list-style:none;
14 }
15 .tab {
16     width:408px;
17     margin:200px auto auto auto;
18 }
19 .hide {
20     display:none;
21 }
22 #tab_head {
23     height:31px;
24     border-top:2px solid #03F;
25     border-bottom:1px solid #090;
26 }
27 #tab_head li {
28     float:left;
29     width:100px;
30     height:30px;
31     line-height:30px;
32     margin:0 0px;
33     text-align:center;
34     border:1px solid #ccc;
35     border-bottom:none;
36     background:#f5f5f5;
37     cursor:pointer
38 }
39 #tab_head .current {
40     position:relative;
41     height:31px;
42     margin-bottom:-1px;
43     background:#fff;
44 }
45 #tab_body {
46     border:1px solid #ccc;
47     border-top:none;
48     padding:20px;
49     height:150px;
50     text-indent:2em;
51 }
52 </style>
53 <script>
54 window.onload = function(){
55   var tab_head = document.getElementById("tab_head");
56   var tab_head_li = tab_head.getElementsByTagName("li");
57   var tab_body = document.getElementById("tab_body");
58   var tab_body_div = tab_body.getElementsByTagName("div");
59   var len = tab_head_li.length;
60   var i=0;
61   var timer = null;
62   var num=0;
63
64       //1.进行初始化设置，设置每个导航的onmouseover和onmouseout的事件
65    for(i=0; i<len; i++){
66         tab_head_li[i].index = i;
67         tab_head_li[i].onmouseover = function(){
68              clearInterval(timer);
69              num = this.index;
70              tab_bodychange();
71         }
72         tab_head_li[i].onmouseout = function(){ autoplay(); }
73    }
74
75    //辅助函数，将num当前置为显示
76   function tab_bodychange(){
77    for(i=0; i<len; i++){
78     tab_head_li[i].className = '';
79     tab_body_div[i].className = 'hide';
80    }
81    tab_head_li[num].className = 'current';
82    tab_body_div[num].className = '';
83   }
84   //辅助函数，自动循环改变
85   function autoplay(){
86    timer = setInterval(function(){num=(++num)%len;tab_bodychange();},500);
87   }
88   autoplay();//2.进入自动循环
89  }
90 </script>
91 </head>
92 <body>
93 <div class="tab">
94   <ul id="tab_head">
95     <li class="current">HOME</li>
96     <li>VIDEO</li>
97     <li>IMAGE</li>
98     <li>MUSIC</li>
99   </ul>
100   <div id="tab_body">
101     <div>HOME 标签</div>
102     <div class="hide">VIDEO 标签</div>
103     <div class="hide">IMAGE 标签</div>
104     <div class="hide">MUSIC 标签</div>
105   </div>
106 </div>
107 </body>
108 </html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航