<!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. 过程 sp_addextendedproperty， 对象无效。不允许有扩展属性，或对象不存在。

    过程 sp_addextendedproperty, 对象无效.不允许有扩展属性,或对象不存在. 首先这个是创建数据表的SQL,有Power Designer创建模型,直接生成的创建SQL会出现的问题 ...

  2. springboot~使用docker构建gradle项目

    这是一篇关系到四个知识点的文章,分别是java,docker,springboot和gradle,我们希望在java环境下,使用springboot框架,通过gradle去构建项目,然后把项目部署和运 ...

  3. Python：黑板课爬虫闯关第四关

    第四关地址:http://www.heibanke.com/lesson/crawler_ex03/ 一开始看到的时候有点蒙,不知道啥意思,说密码需要找出来但也没说怎么找啊. 别急,随便输了个昵称和密 ...

  4. ASP.NET Core 2.1的配置、AOP、缓存、部署、ORM、进程守护、Nginx、Polly【源码】

    ps:废话不多说.直接上代码:源码地址:https://github.com/786744873/Asp.Net-Core-2.1-All-Demos/tree/master/src Configur ...

  5. Redis协议规范(RESP)

    Redis 即 REmote Dictionary Server (远程字典服务): 而Redis的协议规范是 Redis Serialization Protocol (Redis序列化协议) 该协 ...

  6. MySQL性能基准测试对比：5.7 VS 8.0

    本文由云+社区发表 作者:数据库 版权声明:本文由腾讯云数据库产品团队整理,页面原始内容来自于severalnines英文官网,若转载请注明出处.翻译目的在于传递更多全球最新数据库领域相关信息,并不意 ...

  7. linux-2.6.18源码分析笔记---中断

    一.中断初始化 中断的一些硬件机制不做过多的描述,只介绍一些和linux实现比较贴近的机制,便于理解代码. 1.1 关于intel和linux几种门的简介 intel提供了4种门:系统门,中断门,陷阱 ...

  8. JFreeChart画图+jsp页面显示实现统计图

    1 开发环境: 1.eclipse(可替换) 2.jfreechart-1.0.19 2 说明: (1) source目录:为 jfreechart的源码目录:不会的主要看这里.因为他的文档是收费的. ...

  9. Java并发——线程介绍

    前言: 互联网时代已经发展到了现在.从以前只考虑小流量到现在不得不去考虑高并发的问题.扯到了高并发的问题就要扯到线程的问题.你是否问过自己,你真正了解线程吗?还是你只知道一些其他博客里写的使用方法.下 ...

  10. 【MySQL】MySQL的执行计划及索引优化

    我们知道一般图书馆都会建书目索引,可以提高数据检索的效率,降低数据库的IO成本.MySQL在300万条记录左右性能开始逐渐下降,虽然官方文档说500~800w记录,所以大数据量建立索引是非常有必要的. ...