原生js,面向过程的方法,写个选项卡练练手

Posted html55

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生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="width: 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         

 

以上是关于原生js,面向过程的方法,写个选项卡练练手的主要内容,如果未能解决你的问题,请参考以下文章

原生js面向对象编程-选项卡(自动轮播)

纯JS制作选项卡--JavaScript实例集锦(初学)

jacascript 原生选项卡插件

JS 面向过程和面向对象实现 Tab选项卡切换

原生js简单轮播图 代码

纯原生JS面向对象构造函数方法实现贪吃蛇小游戏