好多地方都会用到这样一个效果“点击tab切换内容页”,根据自己的想法实现了一下，写了个简单的插件。以前写代码都是标准的函数式编程，现在觉得面向对象编程看起来比较爽，并且更容易维护，于是就用oop的思想写了这个功能。

这里有两个文件change.js 和test.html，内容有注释，就直接上代码了。

js代码：

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

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];
            }
        }
    }

}

html代码：

<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">

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>

由于页面设计能力有限，所以就写了比较简单的样式。大家主要看一下功能，有什么问题或者建议可以直接q我。

一个简单oop的changeTab的更多相关文章

  1. 大话JS面向对象之扩展篇 面向对象与面向过程之间的博弈论（OO Vs 过程）------（一个简单的实例引发的沉思）

    一,总体概要 1,笔者浅谈 我是从学习Java编程开始接触OOP(面向对象编程),刚开始使用Java编写程序的时候感觉很别扭(面向对象式编程因为引入了类.对象.实例等概念,非常贴合人类对于世间万物的认 ...

  2. 哪种缓存效果高？开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  3. 在Openfire上弄一个简单的推送系统

    推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...

  4. ASP.NET Aries 入门开发教程2：配置出一个简单的列表页面

    前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...

  5. 计算机程序的思维逻辑 (60) - 随机读写文件及其应用 - 实现一个简单的KV数据库

    57节介绍了字节流, 58节介绍了字符流,它们都是以流的方式读写文件,流的方式有几个限制: 要么读,要么写,不能同时读和写 不能随机读写,只能从头读到尾,且不能重复读,虽然通过缓冲可以实现部分重读,但 ...

  6. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  7. CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能

    CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能 效果图 这是红宝书里的例子,在这个例子中,下述功能全部登场,因此这个例子可作为使用Compute Shader的典型 ...

  8. CSharpGL(23)用ComputeShader实现一个简单的ParticleSimulator

    CSharpGL(23)用ComputeShader实现一个简单的ParticleSimulator 我还没有用过Compute Shader,所以现在把红宝书里的例子拿来了,加入CSharpGL中. ...

  9. 应用OpenMP的一个简单的设计模式

    小喵的唠叨话:最近很久没写博客了,一是因为之前写的LSoftmax后馈一直没有成功,所以在等作者的源码.二是最近没什么想写的东西.前两天,在预处理图片的时候,发现处理200w张图片,跑了一晚上也才处理 ...

随机推荐

  1. JS魔法堂:不完全国际化&本地化手册 之 实战篇

    前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...

  2. Objective-C集合总结

    Objective-C里面的集合主要包括:NSString,NSMutableString,NSArray,NSMutableArray,NSDictionary,NSMutableDictionar ...

  3. CLR via C# 摘要二：IL速记

    最简单的IL程序 .assembly test {} .method void Func() { .entrypoint ldstr "hello world" call void ...

  4. 前端开发：setTimeout与setInterval 定时器与异步循环数组

    前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...

  5. C# Linq排序

    今天在家看了一下linq,实践了一下书中代码,发现排序和查重的先后顺序太重要了. using System; using System.Collections.Generic; using Syste ...

  6. java集合你了解多少？

    用了java集合这么久,还没有系统的研究过java的集合结构,今天亲自画了下类图,总算有所收获. 一.所有集合都实现了Iterable接口. Iterable接口中包含一个抽象方法:Iterator& ...

  7. Servlet的生命周期及工作原理

    Servlet生命周期分为三个阶段: 1,初始化阶段  调用init()方法 2,响应客户请求阶段 调用service()方法 3,终止阶段 调用destroy()方法 Servlet初始化阶段: 在 ...

  8. px、dp和sp，这些单位有什么区别？

    DP 这个是最常用但也最难理解的尺寸单位.它与“像素密度”密切相关,所以 首先我们解释一下什么是像素密度.假设有一部手机,屏幕的物理尺寸为1.5英寸x2英寸,屏幕分辨率为240x320,则我们可以计算 ...

  9. 301和302 Http状态有啥区别？

    301和302 Http状态有啥区别? 301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于: 301 redirect: 301 代表永久性转移(Permanently ...

  10. 5.2 Array类型介绍

    Array类型是数组类型,Array(数组)类型也是引用类型中的一种. js 数组中的每一项可以保存任何类型的数据. js数组的大小/长度是可以动态调整的.如果你往数组中添加数据,数组长度会自动增加. ...