<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>js制作一个选项卡</title>

         <style type="text/css">

             .tab_title span.active {

                 background:#000;

                 color: #FFF;

             }

             .tab_content {

                 border:1px solid #000;

                 padding: 20px;

             }

             .tab_content div {

                 display: none;

             }

             .tab_content div.active {

                 display: block;

             }

         </style>

         <script type="text/javascript">

             //1.选取到tab选项卡 2.为选项卡添加事件

             window.onload = function(){

                 var arr_tab_span = document.getElementsByTagName('span');

                 var tab_section = document.getElementById('sec_con');

                 var arr_tab_div = tab_section.getElementsByTagName('div');

                 //console.log(arr_tab_span);

                 //console.log(tab_section);

                 //console.log(arr_tab_div);

                 for (var i=0; i<arr_tab_span.length;i++) {

                     arr_tab_span[i].index = i;

                     arr_tab_span[i].onclick = function(){ //为选项卡点击添加事件

                         for(var j=0;j<arr_tab_span.length;j++){

                             arr_tab_span[j].className = '';

                             arr_tab_div[j].className = '';

                         }//for结束

                         this.className = 'active';

                         arr_tab_div[this.index].className = 'active';

                     }

                 }//for结束

             }

         </script>

     </head>

     <body>

         <div style="width: 500px;">

             <nav class="tab_title">

                 <span class="active">语文</span>

                 <span>数学</span>

                 <span>娱乐</span>

             </nav>

             <section class="tab_content" id="sec_con">

                 <div class="active">

                     鲁迅是语文课本上的

                 </div>

                 <div>

                     祖冲之是数学课上的

                 </div>

                 <div>

                     孙悟空是娱乐电视里的

                 </div>

             </section>

         </div>

     </body>

 </html>

代码效果如下

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

         <script type="text/javascript">

             //1.选取到tab选项卡 2.为选项卡添加事件

             var arr_tab_span,

                 tab_section,

                 arr_tab_div;

             window.onload = function() {

                 init();

             }

             function init(){

                 arr_tab_span = document.getElementsByTagName('span');

                 tab_section = document.getElementById('sec_con');

                 arr_tab_div = tab_section.getElementsByTagName('div');

                 for(var i = 0; i < arr_tab_span.length; i++) {

                     arr_tab_span[i].index = i;

                     arr_tab_span[i].onclick = change;

                 } //for结束

             }

             function change() { //为选项卡点击添加事件

                 for(var j = 0; j < arr_tab_span.length; j++) {

                     arr_tab_span[j].className = '';

                     arr_tab_div[j].className = '';

                 } //for结束

                 this.className = 'active';

                 arr_tab_div[this.index].className = 'active';

             }

         </script>

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

         <script type="text/javascript">

             window.onload = function() {

                 var tab1 = new Tab();

                 tab1.init();

             }

             function Tab(){

                 this.arr_tab_span = document.getElementsByTagName('span');

                 this.tab_section = document.getElementById('sec_con');

                 this.arr_tab_div = this.tab_section.getElementsByTagName('div');

             }

             Tab.prototype.init = function(){

                 for(var i = 0; i < this.arr_tab_span.length; i++) {

                     var _this = this;

                     this.arr_tab_span[i].index = i;

                     //this.arr_tab_span[i].index = i;

                     this.arr_tab_span[i].onclick = function(){

                         _this.change(this);

                     }

                 } //for结束

             }

             Tab.prototype.change = function(obj) {

                 //console.log(this);

                 //为选项卡点击添加事件

                 for(var j = 0; j < this.arr_tab_span.length; j++) {

                     this.arr_tab_span[j].className = '';

                     this.arr_tab_div[j].className = '';

                 } //for结束

                 obj.className = 'active';

                 this.arr_tab_div[obj.index].className = 'active';

             }

         </script>

原生js，从面向过程的方法到面向对象的方法，写个选项卡练练手的更多相关文章

  1. JS是面向过程、面向对象还是基于对象？面向对象的代码体现

    一.问题 javascript是面向对象的,还是面向过程的?基于对象是什么意思? 对象: 指的是对某一类事物进行抽象,抽象出这一类事物共同的特征以及行为(也就是属性和方法),那些拥有这一共同属性和方法 ...

  2. 使用原生js来控制、修改CSS伪元素的方法总汇, 例如:before和:after

    在网页中,如果需要使用辅助性/装饰性的内容的时候,我们不应该直接写在HTML中,这样会影响真正的内容,这就需要使用伪元素了,这是由于css的纯粹语义化是没有意义的.在使用伪元素的时候,会发现js并不真 ...

  3. 面向对象和面向过程，python中的类class，python中程序的入口——main方法，

    1.程序入口,让main显现出来: print(__name__)#__name___是模块中的隐藏字段,当前模块运行的函数名 if __name__ == __main__ __main__() # ...

  4. 理解面向过程（OPP）、面向对象（OOP）、面向切面（AOP）

    概念 面向过程编程OPP:Procedure Oriented Programming,是一种以事物为中心的编程思想.主要关注“怎么做”,即完成任务的具体细节. 面向对象编程OOP:Object Or ...

  5. 面向过程 vs 面向对象

    从网上摘录了一些面向过程vs.面向对象的分析,先简单记录如下,稍后会继续整理. 为什么会出现面向对象分析方法? 因为现实世界太复杂多变,面向过程的分析方法无法实现. 面向过程 采用面向过程必须了解整个 ...

  6. 原生js实现滚动条

    var SimulateScroll = (function(){ var oParent = document.getElementById('wrap-scroll-bar'), oBox = d ...

  7. <一>面向对象分析之面向对象和面向过程

    面向对象        ---->注重的是拆分,组装.        ---->封装,继承,多态,复用(只是现象)        ---->面向对象变成的目标从来就不是复用.相反,对 ...

  8. OC - 1.面向过程和面向对象的思想对比

    一.面向过程 1> 思想 面向过程是一种以过程为中心的最基础编程思想,不支持面向对象的特性. 面向过程是一种模块化程序设计方法 2> 开发方法 面向过程的开发方法是以过程(也可以说是模块) ...

  9. PHP面向对象和面向过程

    编程界不论是PHP.Python都有这么两种编程思想,oop面向对象.pop面向过程,这两种在功能上没有多大区别,但是在代码编写上却有很大区别.今天就记录一下面向对象和面向过程的优点.缺点.定义.实现 ...

随机推荐

  1. 【Android Studio安装部署系列】三十五、从Android studio3.0.1升级到Android studio3.1.4【以及创建android p模拟器的尝试（未成功）】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 因为想要使用Android P模拟器,所以需要将Android Studio升级到3.1版本以上. Android P模拟器的最低版 ...

  2. 目标检测 非极大值抑制（Non-Maximum Suppression，NMS）

    非极大值抑制(Non-Maximum Suppression,NMS),顾名思义就是抑制不是极大值的元素,可以理解为局部最大搜索.也可以理解为只取置信度最高的一个识别结果. 举例:  如图所示,现在 ...

  3. Asp.Net Core 轻松学-在.Net Core 使用缓存和配置依赖策略

    前言     几乎在所有的应用程序中,缓存都是一个永恒的话题,恰当的使用缓存可以有效提高应用程序的性能:在某些业务场景下,使用缓存依赖会有很好的体验:在 Asp.Net Core 中,支持了多种缓存组 ...

  4. 关于px，分辨率，ppi的辨析

    概述  在本篇文章的开始,我先为大家解释一下这三个名词的概念.  px全称为pixel--像素.pc及移动设备的屏幕就是通过往像素矩阵中填充颜色,从而在宏观上体现出图像.像素越小,图像越清晰.  分辨 ...

  5. Python实现Singleton模式的几种方式

    使用python实现设计模式中的单例模式.单例模式是一种比较常用的设计模式,其实现和使用场景判定都是相对容易的.本文将简要介绍一下python中实现单例模式的几种常见方式和原理.一方面可以加深对pyt ...

  6. IOC之Unity的使用详解

    原文链接:https://www.cnblogs.com/hua66/p/9670639.html Unity作为Microsoft推出IOC容器,其功能是非常丰富的,其中需要注意的地方也不少.以下是 ...

  7. Java高阶语法---transient

    背景:听说transient Java高阶语法是挺进BAT必经之路. transient: Java中transient 关键字的作用,简单的说就是让某些被修饰的成员属性变量不被序列化. 这又扯到了序 ...

  8. 【Redis】redis各类型数据存储分析

    一.简介和应用 Redis是一个由ANSI C语言编写,性能优秀.支持网络.可持久化的K-K内存数据库,并提供多种语言的API.它常用的类型主要是 String.List.Hash.Set.ZSet ...

  9. IO流-输入输出的简单实例

    InputStream和OutputStream 抽象类InputStream和OutputStream是IO流最底层的两个抽象类,所有输入/输出流的类都基于这两个类. 这两个类里最核心的三个方法是r ...

  10. Git日常须知

    基本操作: git init 初始化环境 git add . 管理文件 git status 查看状态 git diff 文件名 查看修改内容 git commit -m '' 提交文件 git lo ...