zoukankan      html  css  js  c++  java
  • 原生js,从面向过程的方法到面向对象的方法,写个选项卡练练手

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>js制作一个选项卡</title>
     6         <style type="text/css">
     7             .tab_title span.active {
     8                 background:#000;
     9                 color: #FFF;
    10             }
    11             .tab_content {
    12                 border:1px solid #000;
    13                 padding: 20px;
    14             }
    15             .tab_content div {
    16                 display: none;
    17             }
    18             .tab_content div.active {
    19                 display: block;
    20             }
    21         </style>
    22         
    23         <script type="text/javascript">
    24             //1.选取到tab选项卡 2.为选项卡添加事件
    25             window.onload = function(){
    26                 var arr_tab_span = document.getElementsByTagName('span');
    27                 var tab_section = document.getElementById('sec_con');
    28                 var arr_tab_div = tab_section.getElementsByTagName('div');
    29                 
    30                 //console.log(arr_tab_span);
    31                 //console.log(tab_section);
    32                 //console.log(arr_tab_div);
    33                 
    34                 for (var i=0; i<arr_tab_span.length;i++) {
    35                     arr_tab_span[i].index = i;
    36                     arr_tab_span[i].onclick = function(){ //为选项卡点击添加事件
    37                         for(var j=0;j<arr_tab_span.length;j++){
    38                             arr_tab_span[j].className = '';
    39                             arr_tab_div[j].className = '';
    40                         }//for结束
    41                         this.className = 'active';
    42                         arr_tab_div[this.index].className = 'active';
    43                         
    44                     }
    45                 }//for结束
    46             }
    47         </script>
    48         
    49     </head>
    50     <body>
    51         <div style=" 500px;">
    52             <nav class="tab_title">
    53                 <span class="active">语文</span>
    54                 <span>数学</span>
    55                 <span>娱乐</span>
    56             </nav>
    57             <section class="tab_content" id="sec_con">
    58                 <div class="active">
    59                     鲁迅是语文课本上的
    60                 </div>
    61                 <div>
    62                     祖冲之是数学课上的
    63                 </div>
    64                 <div>
    65                     孙悟空是娱乐电视里的
    66                 </div>
    67             </section>            
    68         </div>        
    69     </body>
    70 </html>

    代码效果如下

    现在对JS代码进行改造,添加全局变量,函数不要嵌套,变成了如下,亦可用

     1         <script type="text/javascript">
     2             //1.选取到tab选项卡 2.为选项卡添加事件
     3             var arr_tab_span,
     4                 tab_section,
     5                 arr_tab_div;
     6             window.onload = function() {        
     7                 init();
     8             }
     9             
    10             function init(){
    11                 arr_tab_span = document.getElementsByTagName('span');
    12                 tab_section = document.getElementById('sec_con');
    13                 arr_tab_div = tab_section.getElementsByTagName('div');
    14                 
    15                 for(var i = 0; i < arr_tab_span.length; i++) {
    16                     arr_tab_span[i].index = i;
    17                     arr_tab_span[i].onclick = change;
    18                 } //for结束                
    19             }
    20             
    21             function change() { //为选项卡点击添加事件
    22                 for(var j = 0; j < arr_tab_span.length; j++) {
    23                     arr_tab_span[j].className = '';
    24                     arr_tab_div[j].className = '';
    25                 } //for结束
    26                 this.className = 'active';
    27                 arr_tab_div[this.index].className = 'active';
    28             }
    29             
    30         </script>

     继续改造,js代码变成如下,面向对象的方式,即可成功运行

     1         <script type="text/javascript">
     2             window.onload = function() {
     3                 var tab1 = new Tab();
     4                 tab1.init();
     5             }
     6             
     7             function Tab(){
     8                 this.arr_tab_span = document.getElementsByTagName('span');
     9                 this.tab_section = document.getElementById('sec_con');
    10                 this.arr_tab_div = this.tab_section.getElementsByTagName('div');                
    11             }
    12             
    13             Tab.prototype.init = function(){
    14                 for(var i = 0; i < this.arr_tab_span.length; i++) {
    15                     var _this = this;
    16                     this.arr_tab_span[i].index = i;
    17                     //this.arr_tab_span[i].index = i;
    18                     this.arr_tab_span[i].onclick = function(){
    19                         _this.change(this);
    20                     }
    21                 } //for结束                
    22             }
    23             
    24             Tab.prototype.change = function(obj) {
    25                 //console.log(this);
    26                 //为选项卡点击添加事件
    27                 for(var j = 0; j < this.arr_tab_span.length; j++) {
    28                     this.arr_tab_span[j].className = '';
    29                     this.arr_tab_div[j].className = '';
    30                 } //for结束
    31                 obj.className = 'active';
    32                 this.arr_tab_div[obj.index].className = 'active';
    33             }
    34             
    35         </script>
    36         
  • 相关阅读:
    android 多线程
    Uva 10881 Piotr’s Ants 蚂蚁
    LA 3708 Graveyard 墓地雕塑 NEERC 2006
    UVa 11300 Spreading the Wealth 分金币
    UVa 11729 Commando War 突击战
    UVa 11292 The Dragon of Loowater 勇者斗恶龙
    HDU 4162 Shape Number
    HDU 1869 六度分离
    HDU 1041 Computer Transformation
    利用可变参数函数清空多个数组
  • 原文地址:https://www.cnblogs.com/html55/p/9768033.html
Copyright © 2011-2022 走看看