<html>

<style type="text/css">

.current { background-color: red; }

.dv { background-color: green; width: 200px; height: 200px; }

</style>

<head>

<script type="text/javascript" src="change.js"></script>

<script type="text/javascript">

/*********查询节点是否包含某个样式*******/

var hasClass = function(tag, clsName) {

    var arr = tag.className.split(/\s+/);

    for (var i = 0; i < arr.length; i++) {

        if (arr[i] == clsName) {

            return true;

        }

    };

    return false;

}

/*********扩展getElementsByClassName函数（兼容IE低版本）*********/

if (!document.getElementsByClassName) {

    document.getElementsByClassName = function(cls) {

        var nodeArr = [];

        var nodes = document.getElementsByTagName('*');

        if (nodes && nodes.length > 0) {

            for (var i = 0; i < nodes.length; i++) {

                if (hasClass(nodes[i], cls)) {

                    nodeArr.push(nodes[i]);

                }

            };

        }

        return nodeArr;

    }

}

var changeTab = function(option) {

    // body...

    this.Init.apply(this, arguments);

}

changeTab.prototype = {

    /********参数的初始化********/

    Init: function() {

        var arr = Array.prototype.slice.call(arguments);

        this.option = arr[0] || {

            inittab: 0, //设置选中的tab索引

            tab: '', //tab的className

            tabclass: '', //tab点击之后的样式

            container: '' //div的className

        };

    },

    /*************函数执行**************/

    render: function() {

        ///获取要操作的tab和div

        this.tabs = document.getElementsByClassName(this.option.tab);

        this.contents = document.getElementsByClassName(this.option.container);

        if (this.tabs.length == 0 || this.contents.length == 0) {

            return;

        }

        if (this.tabs.length != this.contents.length) {

            return;

        }

        var that = this; ///由于闭包要用到此函数的参数，作用域不一致，所以要用that指向当前的函数

        ////设置初始显示的tab和div内容

        this.contents[this.option.inittab].style.display = 'block';

        this.tabs[this.option.inittab].className = that.option.tab + ' ' + that.option.tabclass;

        for (var i = 0; i < this.tabs.length; i++) {

            /////闭包

            (function(num) {

                that.tabs[num].onclick = function() {

                    for (var k = 0; k < that.contents.length; k++) {

                        ///隐藏所有div和去除所有tab样式

                        that.contents[k].style.display = 'none';

                        that.tabs[k].className = that.option.tab;

                    };

                    ///显示和设置当前点击的tab和div内容

                    this.className = that.option.tab + ' ' + that.option.tabclass;

                    that.contents[num].style.display = 'block';

                }

            })(i);

        }

    },

   /*************为函数扩展功能**************/

    extend: function(obj) {

        if (obj && Object.prototype.toString.call(obj) == "[object Object]") {

            for (prop in obj) {

                this[prop] = obj[prop];

            }

        }

    }

}

window.onload=function  () { // body...

    var  tb=new    changeTab( { inittab: 0,  tab:'sp', tabclass:'current', container:'dv' });

    tb.render();

}

</script>

</head>

<body>

<div>

<span class="sp" >111</span>

<span class="sp">222</span>

<span class="sp">333</span>

</div>

<div  id="">

<div  class="dv" style="display: none; ">dv1</div>

<div  class="dv"  style="display: none; ">dv2</div>

<div  class="dv"  style="display: none; ">dv3</div>

<div>

</body>

</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. hlsl 的tex函数

    texCUBE http://msdn.microsoft.com/en-us/library/windows/desktop/bb509687(v=vs.85).aspx

  2. iOS开发之数据存取3-CoreData自定义数据类型

    当系统提供的类型不能达到我们的使用要求时,比如我想在CoreData中存储UIColor,该怎么办呢? 这时候就要用到CoreData中非常强大的一个存储类型了:Transformable 下面将通过 ...

  3. IP地址总结

    1.网际协议IP : 网际协议 IP 是 TCP/IP 体系中两个最主要的协议之一.与 IP 协议配套使用的还有四个协议: 地址解析协议 ARP (Address Resolution Protoco ...

  4. PHP字符串中的变量解析（+教你如何在PHP字符串中加入变量）

    定义字符串的时候,用单引号或者双引号都是可以的.我个人习惯是用双引号.在输出字符串的时候,若字符串中含有字符串变量,使用单引号和双引号则是有区别的.如下面程序: 1 2 3 4 5 6 7 8 < ...

  5. 使用getJSON()方法异步加载JSON格式数据

    使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery. ...

  6. 从SQL Server中导入/导出Excel的基本方法(转)

    从sql server中导入/导出 excel 的基本方法 /*=========== 导入/导出 excel 的基本方法 ===========*/ 从excel文档中,导入数据到sql数据库中,很 ...

  7. lintcode：previous permutation上一个排列

    题目 上一个排列 给定一个整数数组来表示排列,找出其上一个排列. 样例 给出排列[1,3,2,3],其上一个排列是[1,2,3,3] 给出排列[1,2,3,4],其上一个排列是[4,3,2,1] 注意 ...

  8. Matlab程序 转C++/Opencv基于Mat 不可不知的17个函数

    1.matlab中的imread相当于OpenCV中的cvLoadImage(imageName,  CV_LOAD_IAMGE_ANYDEPTH | CV_LOAD_IMAGE_ANYCOLOR): ...

  9. StringBuffer的用法

    StringBuffer类和String一样,也用来代表字符串,只是由于StringBuffer的内部实现方式和String不同,所以StringBuffer在进行字符串处理时,不生成新的对象,在内存 ...

  10. C#基础练习（时间的三连击）

    Form1的后台代码: namespace _07事件的三连击 {     public partial class Form1 : Form     {         public Form1() ...