<!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. 安装window下的redis，redis可视化管理工具（Redis Desktop Manager）安装，基础使用，实例化项目

    以下包括内容: 一.redis下载安装,启动 二.Redis可视化管理工具(Redis Desktop Manager)安装 三.实例化项目 一.redis下载安装,启动 1,redis官方下载地址: ...

  2. Ocelot.JwtAuthorize：一个基于网关的Jwt验证包

    Ocelot作为基于.net core的API方关,有一个功能是统一验证,它的作用是把没有访问权限的请求挡在API网关外面,而不是到达API网关事端的API时才去验证:之前我有一篇博文https:// ...

  3. [区块链] 带你进入Bitcoin开发 - 环境搭建

    学习完区块链枯燥乏味的.高深的.必备的基础知识后,终于可以走上开发之路了!真是迫不及待啦!之后博客更新主要放在区块链的开发上,相信这才是大多数同学更加感兴趣的地方!学习过程从最经典的区块链鼻祖-比特币 ...

  4. mybatis自动填充时间字段

    对于实体中的created_on和updated_on来说,它没有必要被开发人员去干预,因为它已经足够说明使用场景了,即在插入数据和更新数据时,记录当前时间,这对于mybatis来说,通过拦截器是可以 ...

  5. [macOS开发.NET Core] 开篇 & 抉择 & 先利其器

    一直以来MacBook是大多数开发者的首选,无论是macOS的便利性,还是MBP的外观,更或者是为了装13,我一直认为一个开发者必须得拥有一部MBP.虽然最后的因素是大多数的. 终于在我的努力下说服下 ...

  6. vue工程利用pubsub-js实现兄弟组件之间的通信

    前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...

  7. group by搭配 order by解决排序问题

    问题 Ftravel_id Facct_no Froute_code Fmodify_time 41010020180725102219102000010452 1359c027b0a15266418 ...

  8. 【春华秋实】.NET Core之只是多看了你一眼

    感官初体验 技术学习是一件系统性的事情,如果拒绝学习,那么自己就会落后以至于被替代..NET也是一样,当开源.跨平台成为主流的时候,如果再故步自封,等待.NET的就是死路一条,幸好.NET Core问 ...

  9. leetcode math类型题目解题总结

    2. Add Two Numbers https://leetcode.com/problems/add-two-numbers/description/ class Solution { publi ...

  10. oracle锁表与解表

    查看锁表进程SQL语句1: select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo ...