js 选项卡制作

知识回顾，制作JS选项卡，仅供参考

html代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>选项卡</title>
 6   <style>
 7   *{
 8     margin:0;
 9     padding:0;
10     text-decoration: none;
11   }
12   li{
13     list-style-type: none;
14   }
15   div.con{
16     position:relative;
17     width:300px;
18     height:400px;
19     background: #ccc;
20     margin: 100px auto;
21     border: 1px solid #531;
22   }
23   .title{
24     width:100%;
25     height:40px;
26     background: #aaf;
27     border: 1px solid #eee;
28   }
29   .content{
30     width:100%;
31     height:360px;
32   }
33   .title li{
34     float:left;
35     display: inline-block;
36     width:25%;
37     text-align: center;
38     line-height: 40px;
39     cursor:pointer;
40     cursor:hand;
41   }
42   .content div li{
43     height:30px;
44     line-height: 30px;
45     margin:0 20px;
46   }
47    .content div li span.nei{
48      margin-left:10px;
49    }
50   </style>
51 </head>
52 <body>
53   <div class="con">
54     <ul class="title">
55       <li>销售</li>
56       <li>技术支持</li>
57       <li>研发</li>
58       <li>行政</li>
59     </ul>
60     <ul class="content">
61       <div>
62         <li><a href="javascript:;" class="he"><span class="tle">1</span><span class="nei">销售了一台电脑</span></a></li>
63         <li><a href="javascript:;" class="he"><span class="tle">2</span><span class="nei">销售了一台键盘</span></a></li>
64         <li><a href="javascript:;" class="he"><span class="tle">3</span><span class="nei">销售了一条牛仔裤</span></a></li>
65         <li><a href="javascript:;" class="he"><span class="tle">4</span><span class="nei">销售了一台手机屏幕</span></a></li>
66         <li><a href="javascript:;" class="he"><span class="tle">5</span><span class="nei">销售了一双筷子</span></a></li>
67         <li><a href="javascript:;" class="he"><span class="tle">6</span><span class="nei">销售了一件快递单纸箱</span></a></li>
68       </div>
69       <div>
70         <li><a href="javascript:;" class="he"><span class="tle">1</span><span class="nei">维护了一台电脑</span></a></li>
71         <li><a href="javascript:;" class="he"><span class="tle">2</span><span class="nei">维护了一台键盘</span></a></li>
72         <li><a href="javascript:;" class="he"><span class="tle">3</span><span class="nei">更换了一条牛仔裤</span></a></li>
73         <li><a href="javascript:;" class="he"><span class="tle">4</span><span class="nei">维护了一台手机屏幕</span></a></li>
74       </div>
75        <div>
76         <li><a href="javascript:;" class="he"><span class="tle">1</span><span class="nei">研发了一台电脑</span></a></li>
77         <li><a href="javascript:;" class="he"><span class="tle">2</span><span class="nei">研发了一台键盘</span></a></li>
78         <li><a href="javascript:;" class="he"><span class="tle">3</span><span class="nei">研发了一条牛仔裤</span></a></li>
79         <li><a href="javascript:;" class="he"><span class="tle">4</span><span class="nei">研发了一台手机屏幕</span></a></li>
80         <li><a href="javascript:;" class="he"><span class="tle">5</span><span class="nei">研发了一台手机屏幕</span></a></li>
81       </div>
82       <div>
83         <li><a href="javascript:;" class="he"><span class="tle">1</span><span class="nei">发布了一项公告</span></a></li>
84         <li><a href="javascript:;" class="he"><span class="tle">2</span><span class="nei">发布了一项通知</span></a></li>
85         <li><a href="javascript:;" class="he"><span class="tle">3</span><span class="nei">发布了一则简讯</span></a></li>
86       </div>
87     </ul>
88   </div>
89 </body>
90 </html>

View Code

js代码：

1. 流程式结构：

 1 window.onload = function(){
 2       var ali = document.querySelectorAll('.title li');
 3       var adiv = document.querySelectorAll('.content div');    
 4       // 初始化
 5       ali.forEach(function(oli,index){
 6         if(index ==0){
 7          oli.style.background = 'red';
 8          adiv[index].style.display = 'block';
 9         }else{
10           oli.style.background = '#aaf';
11           adiv[index].style.display = 'none';
12         }
13       });
14       // 设置动态改变选择li和显示div
15       ali.forEach(function(oli,index){
16         oli.onclick = function(){
17           for(var i=0;i<ali.length;i++){
18             ali[i].style.background = '#aaf';
19             adiv[i].style.display = 'none';
20           }
21           this.style.background = 'red';
22           adiv[index].style.display = "block";        
23         }
24       });
25     };

2. 对象式结构：

 1   window.onload = function(){
 2           var Li_obj = {
 3               ali : [],
 4               adiv : [],
 5               setange : function(){
 6                 this.ali = document.querySelectorAll('.title li');
 7                 this.adiv = document.querySelectorAll('.content div');
 8               },
 9               init:function(){
10                 this.setange();
11                 var that = this;
12                 this.ali.forEach(function(oli,index){
13                   if(index==0){
14                      oli.style.background = 'red';
15                      that.adiv[index].style.display = 'block';
16                   }else{
17                      oli.style.background = '#aaf';
18                      that.adiv[index].style.display = 'none';
19                   };
20                 });
21               },
22               toogle:function(){
23                   var that = this ;
24                   this.ali.forEach(function(oli,index){
25                     oli.onclick = function(){
26                     for(var i=0;i<that.ali.length;i++){
27                       that.ali[i].style.background = '#aaf';
28                       that.adiv[i].style.display = 'none';
29                     }
30                     this.style.background = 'red';
31                     that.adiv[index].style.display = "block";        
32                   }
33                 });
34               },
35           };
36           Li_obj.init();
37           Li_obj.toogle();
38         };

3.构造函数的原型对象式结构：

 1   window.onload = function(){
 2           function getli(){
 3              this.ali = document.querySelectorAll('.title li');
 4              this.adiv = document.querySelectorAll('.content div');    
 5           };
 6           getli.prototype.init = function(){
 7               var that = this ;
 8               this.ali.forEach(function(oli,index){
 9                   if(index==0){
10                      oli.style.background = 'red';
11                      that.adiv[index].style.display = 'block';
12                   }else{
13                      oli.style.background = '#aaf';
14                      that.adiv[index].style.display = 'none';
15                   };
16              });
17           };
18           getli.prototype.toogle = function(){
19                   var that = this ;
20                   this.ali.forEach(function(oli,index){
21                     oli.onclick = function(){
22                     for(var i=0;i<that.ali.length;i++){
23                       that.ali[i].style.background = '#aaf';
24                       that.adiv[i].style.display = 'none';
25                     }
26                     this.style.background = 'red';
27                     that.adiv[index].style.display = "block";        
28                   }
29                 });
30           }
31           var OLI = new getli();
32           OLI.init();
33           OLI.toogle();
34         }

运行结果：

备注：以上结果运行环境：谷歌浏览器；ie浏览器不支持forEach函数，要改成for循环来进行

posted on 2017-12-12 14:11 huanying2015 阅读(304) 评论(0) 编辑收藏举报