<!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. 我的2018OKR年终回顾与2019OKR初步规划

    转眼一年又过去了,在这个年底的时候,按照国际惯例,又到了重新回顾审视一下这一年来的得失,规划一下明年的奋斗方向的时候了.因此,我继续使用OKR来给自己做Review和Planning,也希望自己能够保 ...

  2. AsyncTask原理

    一.概述 Android开发中我们通常让主线程负责前台用户界面的绘制以及响应用户的操作,让工作者线程在后台执行一些比较耗时的任务.Android中的工作者线程主要有AsyncTask.IntentSe ...

  3. Spring Boot系列(一) Spring Boot准备知识

    本文是学习 Spring Boot 的一些准备知识. Spring Web MVC Spring Web MVC 的两个Context 如下图所示, 基于 Servlet 的 Spring Web M ...

  4. 强化学习（八）价值函数的近似表示与Deep Q-Learning

    在强化学习系列的前七篇里,我们主要讨论的都是规模比较小的强化学习问题求解算法.今天开始我们步入深度强化学习.这一篇关注于价值函数的近似表示和Deep Q-Learning算法. Deep Q-Lear ...

  5. 解决WebMagic抓HTTPS时出现SSLException

    访问我的博客 前言 在今年二月份在项目中引入了 WebMagic 技术,用来抓取合作方的书籍,详见之前文章:WebMagic之爬虫监控,这两天新接入了一个合作商,对方接口采取的是 HTTPS 协议,而 ...

  6. 利用SHA-1算法和RSA秘钥进行签名验签(带注释)

    背景介绍 1.SHA 安全散列算法SHA (Secure Hash Algorithm)是美国国家标准和技术局发布的国家标准FIPS PUB 180-1,一般称为SHA-1.其对长度不超过264二进制 ...

  7. sql server 生成数据库字典 sql语句

    SELECT TOP 100 PERCENT --a.id,          CASE WHEN a.colorder = 1 THEN d.name ELSE '' END AS 表名,      ...

  8. IDEA 安装配置可视化 MongDB 插件

    IDEA 安装配置可视化 MongDB 插件 1.安装MongoDB插件 打开 IDEA ,file --> settings --> plugins,在右边搜索栏中输入Mongo,点击 ...

  9. Android AutoCompleteTextView和MultiAutocompleteTextView实现动态自动匹配输入的内容

    AutoCompleteTextView MultiAutocompleteTextView 这两个控件长的很相似,功能也很相似. AutoCompleteTextView 功能: 动态匹配输入的内容 ...

  10. 你不可不知的Java引用类型之——Reference源码解析

    定义 Reference是所有引用类型的父类,定义了引用的公共行为和操作. reference指代引用对象本身,referent指代reference引用的对象,下文介绍会以reference,ref ...