<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. Eclipse中创建标准web工程以及标准目录结构说明

    最近公司有个Web项目,项目结构如下: 虽然运行没有错,但是实在是别扭,标准的web应用一般不采用这种结构: 因此总结一下:     1.如何在Eclipse中创建一个标准的Web应用.     2. ...

  2. Jquery 查看DOM上绑定的事件列表

    $(dom).data( "events" ); 包括事件类型和关联的处理函数 下面是firefox的截图

  3. 【Android自学之旅】 目录

    [Android自学之旅] 目录 [Android自学之旅] Android开发环境的搭建

  4. 常见的排序算法之Java代码解释

    一 简要介绍 一般排序均值的是将一个已经无序的序列数据重新排列成有序的 常见的排序分为: 1 插入类排序 主要就是对于一个已经有序的序列中,插入一个新的记录.它包括:直接插入排序,折半插入排序和希尔排 ...

  5. C#图片上写文字

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Dr ...

  6. hdu 4430 Yukari's Birthday

    思路: 分析知道1<=r<40:所以可以枚举r,之后再二分k. 代码如下: #include<iostream> #include<stdio.h> #includ ...

  7. 2013 Multi-University Training Contest 2 Balls Rearrangement

    先算出lcm(a,b),如果lcm>=n,则直接暴力解决:否则分段,求出0-lcm内的+0-n%lcm内的值. 再就是连续相同的一起计算!! #include<iostream> # ...

  8. java 追加写入代码一例

    最近最项目参数化的时候用到,场景是这样的,需要测试A和B两个接口,其中B接口传入的参数必须是传递给A接口过的,所以整理一个思路就是: 1. 正常调用A接口,但是将传递给A接口的参数保存到文本里,此处要 ...

  9. 李洪强iOS开发之keychain的使用

    通常情况下,我们用NSUserDefaults存储数据信息,但是对于一些私密信息,比如密码.证书等等,就需要使用更为安全的keychain了.keychain里保存的信息不会因App被删除而丢失,在用 ...

  10. spring mvc 常用注解

    1.@requestMapping注解,绑定指定的url,requestmapping注解的属性值有value和method. requestmaping可以作用在类上或者方法上 如:@Request ...