<!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. SpringSecurity设置角色和权限的注意点

    概念 在UserDetailsService的loadUserByUsername方法里去构建当前登陆的用户时,你可以选择两种授权方法,即角色授权和权限授权,对应使用的代码是hasRole和hasAu ...

  2. Spring Boot 2.x ：通过 spring-boot-starter-hbase 集成 HBase

    摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! 本文内容 HBase 简介和应用场景 spring-boot- ...

  3. 【一套代码小程序&Native&Web阶段总结篇】可以这样阅读Vue源码

    前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 在实际代码过程中我们发现,我们可能又要做H5站又要做小程序同时还要做个APP,这里会造成很大的资源浪费,如果设定一 ...

  4. 基于.NetCore的Redis5.0.3（最新版）快速入门、源码解析、集群搭建与SDK使用【原创】

    1.[基础]redis能带给我们什么福利 Redis(Remote Dictionary Server)官网:https://redis.io/ Redis命令:https://redis.io/co ...

  5. kubernetes系列10—存储卷详解

    本文收录在容器技术学习系列文章总目录 1.认识存储卷 1.1 背景 默认情况下容器中的磁盘文件是非持久化的,容器中的磁盘的生命周期是短暂的,这就带来了一系列的问题:第一,当一个容器损坏之后,kubel ...

  6. SLAM+语音机器人DIY系列：（一）Linux基础——2.安装Linux发行版ubuntu系统

    摘要 由于机器人SLAM.自动导航.语音交互这一系列算法都在机器人操作系统ROS中有很好的支持,所以后续的章节中都会使用ROS来组织构建代码:而ROS又是安装在Linux发行版ubuntu系统之上的, ...

  7. 浅谈Linux基本命令

    本篇文章作为Linux 入门的必备篇,主要简述Linux系统目录结构和Linux 基本Shell命令,大致内容如下: ​ 一  Linux目录及其概述 如下目录为CentOS 7目录结构 ​ 1.建立 ...

  8. vue.js之组件篇

    Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重 ...

  9. 常见js报错

    1Uncaught TypeError: Cannot read property 'length' of null Uncaught TypeError: Cannot read property ...

  10. AJAX的创建

    20:29:50 创建的步骤: 1.创建异步请求的核心对象 2.设置请求方式和地址 3.设置结果产生的回调函数 4.进行结果的逻辑处理 5.获取结果并处理 6.发送请求 <!DOCTYPE ht ...