好多地方都会用到这样一个效果“点击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. Index

    我主要在研究.NET/C# 实现 PC IMERP 和 Android IMERP ,目的在解决企业通信中遇到的各类自动化问题   分布式缓存框架: Microsoft Velocity:微软自家分布 ...

  2. Entity Framework实现多列排序

    aList.OrderBy(a => a.WIndex).ThenBy(a=>a.KIndex) 类似sql:order by WIndex,KIndex

  3. C++ map的基本操作和使用

    原文地址:http://blog.sina.com.cn/s/blog_61533c9b0100fa7w.html Map是c++的一个标准容器,她提供了很好一对一的关系,在一些程序中建立一个map可 ...

  4. 深入Collection集合

    List集合 一.ArraryList: 最基本的集合不多做介绍 二.Vector Vector cn=new  Vector(); A:有特有功能 a:添加       public void ad ...

  5. springmvc+spring+mybatis+maven项目集成shiro进行用户权限控制【转】

    项目结构:   1.maven项目的pom中引入shiro所需的jar包依赖关系 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  6. 5分钟让你掌握css3阴影、倒影、渐变小技巧！

    一.开始让大家看一张他们组合的图片再一步一步做: 二.先是建立两个文本不做处理运行如图 三.给第一个div字体加上阴影 text-shadow: 5px 5px 10px red; text-shad ...

  7. 深入理解javascript函数参数与闭包（一）

    在看此文章,希望先阅读关于函数基础内容 函数定义与函数作用域 的章节,因为这篇文章或多或少会涉及函数基础的内容,而基础内容,我放在函数定义函数作用域 章节. 本文直接赘述函数参数与闭包,若涉及相关知识 ...

  8. LDAP注入与防御解析

    [目录] 0x1 LDAP介绍 0x2 LDAP注入攻击及防御 0x3 参考资料 0x1 LDAP介绍 1 LDAP出现的背景 LDAP(Lightweight Directory Access Pr ...

  9. UIScrollView的封装

    UIScrollView的封装 效果 特点 1.用法简单,尺寸大小,随意设置位置 2.可以有多个数据源的数据,可以定制不通的界面(如同上图,一个有文字,一个没有文字) 3.能够实现点击事件 用法 1. ...

  10. Android中使用Notification实现宽视图通知栏（Notification示例二）

    Notification是在你的应用常规界面之外展示的消息.当app让系统发送一个消息的时候,消息首先以图表的形式显示在通知栏.要查看消息的详情需要进入通知抽屉(notificationdrawer) ...