1. <html>
  2. <style type="text/css">
  3. .current { background-color: red; }
  4. .dv { background-color: green; width: 200px; height: 200px; }
  5. </style>
  6. <head>
  7. <script type="text/javascript" src="change.js"></script>
  8. <script type="text/javascript">
  9. /*********查询节点是否包含某个样式*******/
  10. var hasClass = function(tag, clsName) {
  11.     var arr = tag.className.split(/\s+/);
  12.     for (var i = 0; i < arr.length; i++) {
  13.         if (arr[i] == clsName) {
  14.             return true;
  15.         }
  16.     };
  17.     return false;
  18. }
  19. /*********扩展getElementsByClassName函数（兼容IE低版本）*********/
  20. if (!document.getElementsByClassName) {
  21.     document.getElementsByClassName = function(cls) {
  22.         var nodeArr = [];
  23.         var nodes = document.getElementsByTagName('*');
  24.         if (nodes && nodes.length > 0) {
  25.             for (var i = 0; i < nodes.length; i++) {
  26.                 if (hasClass(nodes[i], cls)) {
  27.                     nodeArr.push(nodes[i]);
  28.                 }
  29.             };
  30.         }
  31.         return nodeArr;
  32.     }
  33. }
  34.  
  35. var changeTab = function(option) {
  36.     // body...
  37.     this.Init.apply(this, arguments);
  38. }
  39.  
  40. changeTab.prototype = {
  41.     /********参数的初始化********/
  42.     Init: function() {
  43.         var arr = Array.prototype.slice.call(arguments);
  44.         this.option = arr[0] || {
  45.             inittab: 0, //设置选中的tab索引
  46.             tab: '', //tab的className
  47.             tabclass: '', //tab点击之后的样式
  48.             container: '' //div的className
  49.         };
  50.  
  51.     },
  52.     /*************函数执行**************/
  53.     render: function() {
  54.         ///获取要操作的tab和div
  55.         this.tabs = document.getElementsByClassName(this.option.tab);
  56.         this.contents = document.getElementsByClassName(this.option.container);
  57.         if (this.tabs.length == 0 || this.contents.length == 0) {
  58.             return;
  59.         }
  60.         if (this.tabs.length != this.contents.length) {
  61.             return;
  62.         }
  63.         var that = this; ///由于闭包要用到此函数的参数，作用域不一致，所以要用that指向当前的函数
  64.         ////设置初始显示的tab和div内容
  65.         this.contents[this.option.inittab].style.display = 'block';
  66.         this.tabs[this.option.inittab].className = that.option.tab + ' ' + that.option.tabclass;
  67.         for (var i = 0; i < this.tabs.length; i++) {
  68.             /////闭包
  69.             (function(num) {
  70.                 that.tabs[num].onclick = function() {
  71.                     for (var k = 0; k < that.contents.length; k++) {
  72.                         ///隐藏所有div和去除所有tab样式
  73.                         that.contents[k].style.display = 'none';
  74.                         that.tabs[k].className = that.option.tab;
  75.                     };
  76.                     ///显示和设置当前点击的tab和div内容
  77.                     this.className = that.option.tab + ' ' + that.option.tabclass;
  78.                     that.contents[num].style.display = 'block';
  79.                 }
  80.             })(i);
  81.         }
  82.     },
  83.    /*************为函数扩展功能**************/
  84.     extend: function(obj) {
  85.         if (obj && Object.prototype.toString.call(obj) == "[object Object]") {
  86.             for (prop in obj) {
  87.                 this[prop] = obj[prop];
  88.             }
  89.         }
  90.     }
  91. }
  92.  
  93. window.onload=function  () { // body...
  94.     var  tb=new    changeTab( { inittab: 0,  tab:'sp', tabclass:'current', container:'dv' });
  95.     tb.render();
  96. }
  97. </script>
  98. </head>
  99. <body>
  100.  
  101. <div>
  102. <span class="sp" >111</span>
  103. <span class="sp">222</span>
  104. <span class="sp">333</span>
  105. </div>
  106. <div  id="">
  107. <div  class="dv" style="display: none; ">dv1</div>
  108. <div  class="dv"  style="display: none; ">dv2</div>
  109. <div  class="dv"  style="display: none; ">dv3</div>
  110. <div>
  111. </body>
  112. </html>

javascript OOP编辑思想的一个实践参考的更多相关文章

  1. Linux 中优秀的文本化编辑思想大碰撞（Markdown、LaTeX、MathJax）

    这样一个标题可能不太准确,因为确实无法准确地解释什么叫"文本化编辑思想".其实我这篇随笔主要是想探讨 Markdown.LaTeX.MathJax,有兴趣的朋友可以继续往下看,同时 ...

  2. JavaScript结构三层——思想快速介绍

    本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写JavaS ...

  3. JavaScript结构三层——思想快速入门

      本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写Jav ...

  4. javascript oop深入学习笔记（一）

    一.定义和实例化一个类: 在OOP的思想中,类是一个很重要的元素,一个类表示了具有相似的一类事物的抽象,通过实例化一个类,可以获得属于该类的一个实例,我们也可以称之为对象. 在javascript中, ...

  5. 转载----给JavaScript初学者的24条最佳实践

      给JavaScript初学者的24条最佳实践 1.使用 === 代替 == JavaScript 使用2种不同的等值运算符:===|!== 和 ==|!=,在比较操作中使用前者是最佳实践. “如果 ...

  6. 运用JavaScript构建你的第一个Metro式应用程序（onWindows 8）（二）

    原文 http://blog.csdn.net/zhangxin09/article/details/6793330 先前的学习中,我们已经了解了 Metro式的 JavaScript 应用程序大致如 ...

  7. Linux 桌面玩家指南：12. 优秀的文本化编辑思想大碰撞（Markdown、LaTeX、MathJax）

    特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记数学公式的开始和结束.如果某条评论中出现了两个$,MathJax 会将两个$之 ...

  8. ASP.NET MVC WebApi 返回数据类型序列化控制（json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面，各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目

    ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml)   我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...

  9. 【转】45个实用的JavaScript技巧、窍门和最佳实践

    原文:https://colobu.com/2014/09/23/45-Useful-JavaScript-Tips,-Tricks-and-Best-Practices/ 目录 [−] 列表 第一次 ...

随机推荐

  1. javascript积累

    本来是java程序员,但是工作过程中总是遇到各种js的任务得完成,所以也得慢慢积累啊! 一.浏览器对象模型(Browser Object Model)BOM     window对象:当前浏览器窗口 ...

  2. [设计模式] 10 外观模式 facade

    外观模式应该是用的很多的一种模式,特别是当一个系统很复杂时,系统提供给客户的是一个简单的对外接口,而把里面复杂的结构都封装了起来.客户只需使用这些简单接口就能使用这个系统,而不需要关注内部复杂的结构. ...

  3. unity3d android互调

    unityPlayer = new AndroidJavaClass("com.xxx.xxx.MainActivity"); curActivity = unityPlayer. ...

  4. Building Plugins for iOS

    This page describes Native Code Plugins for the iOS platform. Building an Application with a Native ...

  5. Lua 简单的IO交互 和迷宫代码

    function room1 () print("in room1") local move = io.read() if move == "south" th ...

  6. [shell编程]正则表达式

    如果在shell脚本中处理数据文件,那么我们就必须熟悉正则表达式.正则表达式是用来过滤数据流中文本的模式模板,模式由标准文本字符和特殊字符组成.正则表达式用特殊字符来匹配一系列一个或多个字符,要想掌握 ...

  7. 深入浅出ES6（四）：模板字符串

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符 ...

  8. IOS:利用dispatch_once创建单例

    在之前有一篇学习笔记中,记载了一篇如何在OC中实现单例的文章:<IOS学习笔记4—Objective C—创建单例>自苹果引入了Grand Central Dispatch (GCD)(M ...

  9. Spark Mllib逻辑回归算法分析

    原创文章,转载请注明: 转载自http://www.cnblogs.com/tovin/p/3816289.html 本文以spark 1.0.0版本MLlib算法为准进行分析 一.代码结构 逻辑回归 ...

  10. 包含中文的字符串中截取前N个字符

    package com.wangzhu.string; import java.io.UnsupportedEncodingException; public class SubStringDemo1 ...