zoukankan      html  css  js  c++  java
  • 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循环来进行

    http://www.cnblogs.com/huanying2015 博客随笔大多数文章均属原创,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利
  • 相关阅读:
    手把手教你创建ASP.NET MVC Dashboard应用
    DevExpress ASP.NET v20.2版本亮点放送:甘特图控件全面升级
    .NET 6已到来?Telerik WinForm率先支持
    手把手教你创建一个Vue Dashboard应用
    Kendo UI for jQuery数据管理使用教程:更改PivotGrid字段名称
    现代应用的启动屏幕如何更美观?这款第三方控件你使用了吗?
    VS插件CodeRush v20.2.8正式发布,支持新的代码模板
    这个三方控件,让你的ASP.NET应用图表界面更酷炫
    nginx负载均衡技术基础
    面向过程的代码请不要拆分成多个脚本
  • 原文地址:https://www.cnblogs.com/huanying2015/p/8027504.html
Copyright © 2011-2022 走看看