<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. C# Socket连接超时设置

    问题描述:         对于C# Socket没有超时设置的选项,默认情况下进行Socket连接,返回连接失败需要20-30s时间,严重影响用户体验 问题解决: Socket服务器端: Socke ...

  2. 将web应用打成war包发布到服务器

    如何将web应用打成war应用发布到服务器步骤: (1)先有一web应用"google"在C:盘下,如图: google下目录有WEB-INF文件夹(下有classes.lib.w ...

  3. ios开发之网络基础

    1.网络访问的步骤 1> 建立NSURL 2> 建立NSURLRequest 3> 建立NSURLConnection 4> 开始连接 - (void)viewDidLoad ...

  4. [nowCoder] 两个不等长数组求第K大数

    给定两个有序数组arr1和arr2,在给定一个整数k,返回两个数组的所有数中第K小的数.例如:arr1 = {1,2,3,4,5};arr2 = {3,4,5};K = 1;因为1为所有数中最小的,所 ...

  5. int a[5]={1,2,3,4,5}; int *p=(int*)(&a+1); printf("%d",*(p-1)); 答案为什么是5？

    这个问题的关键是理解 &a a是一个数组名,也就是数组的首地址.对a进行取地址运算符,得到的是一个指向数组的指针!!!!这句话尤为重要!也就相当于int (*p) [5] = &a;p ...

  6. 【Ｈibernate总结系列】....hbm.xml配置

    在Hibernate中,各表的映射文件….hbm.xml可以通过工具生成,例如在使用MyEclipse开发时,它提供了自动生成映射文件的工具.本节简单的讲述一下这些配置文件的配置. 配置文件的基本结构 ...

  7. 01-07-01【Nhibernate (版本3.3.1.4000) 出入江湖】并发控制

    Nhibernate 并发控制 [1]悲观并发控制 正在使用数据的操作,加上锁,使用完后解锁释放资源. 使用场景:数据竞争激烈,锁的成本低于回滚事务的成本 缺点:阻塞,可能死锁 [2]乐观并发控制: ...

  8. uva 11235

    数据结构 RMQ算法   左右左右   写得有点晕了 ..... /****************************************************************** ...

  9. hdu 2736 Surprising Strings（类似哈希，字符串处理）

    重点在判重的方法,嘻嘻 题目 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<string.h> int ...

  10. 递归算法实现10进制到N进制的转换

    #include<iostream> using namespace std; int BaseTrans(int data,int B){ int s; ) ; //结束递归算法 s=d ...