原生javascript-Tab选项卡-面向对象

分析个人用原生JS获取类名元素的代码：

getByClassName:function(className,parent){

            var elem = [],

                node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),

                p = new RegExp("(^|\\s)"+className+"(\\s|$)");

            for(var n=0,i=node.length;n<i;n++){

                if(p.test(node[n].className)){

                    elem.push(node[n]);

                }

            }

            return elem;

        }

　　parent参数是可选的，但需要先判断它是否存在，且是节点dom元素 parent != undefined&&parent.nodeType==1 ，nodeType == 1可以判断节点是否为dom元素，在火狐浏览器里面，空白也算是节点（.childnodes），用这个属性就判断是否为dom元素，排除空白符.

移除元素的类名：

var cur = new RegExp(this.sCur,'g');  //this.sCur就是类名，这里是用变量保存 如：this.sCur = "cur";
           this.oTab_btn[n].className = this.oTab_btn[n].className.replace(cur,'');

调用例子：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    body,p,ul,li {padding: 0;margin: 0;}

    ul {list-style: none;}

    h3 {padding: 5px;background-color: #999;margin-bottom: 10px;}

    pre {border: 1px dotted #000;}

    .explan {padding: 10px;color: #333;line-height: 1.6;}

    .box {width: 300px;height:100px;border: 1px solid #ccc;}

    .box ul{height: 30px;line-height: 30px;}

    .box ul li {float: left;display: inline;width: 150px;text-align: center;background-color: #eee;cursor: pointer;}

    .box .tab-cur {background-color: #000;color: #fff;}

    .box p {display: none;padding: 30px;}

    /*tabB*/

    #tabB {width: 450px;}

    .box .tab-cur02 {background-color: #025023;}

    </style>

</head>

<body>

    <div class="explan">

        <strong>使用阅读 ：</strong> <br>

        　　  {'tabBtn':'#tabA .tab-i','tabCon':'#tabA .tab-c','cur':'tab-cur'} 【必选】 <br>

        　　（1）'tabBtn':'#tabA .tab-i','tabCon':'#tabA .tab-c'　　选择器：只支持 #id　.className，(ID + 空格 + 类名) 【必选】<br>

        　　（2）'cur':'tab-cur'（默认） ：为切换按钮当前状态（类名）【必选】<br>

        　　（3）'type':'mouseover'|| 'clicl' 默认是点击 【可选】

    </div>

    <h3>tabA</h3>

     <pre>new LGY_tab({'tabBtn':'#tabA .tab-i',

    'tabCon':'#tabA .tab-c',

    'cur':'tab-cur'

    });

         </pre>

    <div class="box" id="tabA">

        <ul>

            <li class="tab-i">btn-A</li>

            <li class="tab-i">btn-B</li>

        </ul>

        <p class="tab-c">con-A</p>

        <p class="tab-c">con-B</p>

    </div>

    <h3>tabB</h3>

     <pre>new LGY_tab({'tabBtn':'#tabB .tab-i',

    'tabCon':'#tabB .tab-k',

    'cur':'tab-cur02',

    'type':'mouseover'

    });

         </pre>

    <div class="box" id="tabB">

        <ul>

            <li class="tab-i">btn-A</li>

            <li class="tab-i">btn-B</li>

            <li class="tab-i">btn-C</li>

        </ul>

        <p class="tab-k">con-A</p>

        <p class="tab-k">con-B</p>

        <p class="tab-k">con-C</p>

    </div>

    <script type="text/javascript" src="下方的代码段.js"></script>

    <script type="text/javascript">

    //

    new LGY_tab({'tabBtn':'#tabA .tab-i',

                 'tabCon':'#tabA .tab-c',

                 'cur':'tab-cur'

    });

    //

    new LGY_tab({'tabBtn':'#tabB .tab-i',

                 'tabCon':'#tabB .tab-k',

                 'cur':'tab-cur02',

                 'type':'mouseover'

    });

    //test

    //

    new LGY_tab({'tabBtn':'#tabB .tab-j',

                 'tabCon':'#tabB .tab-k',

                 'cur':'tab-cur02',

                 'type':'mouseover'

    });

    </script>

</body>

</html>

JS详细代码：

function LGY_tab(option){

    this.oTab_btn = this.getDom(option.tabBtn);//切换点击的元素

    this.oTab_clist = this.getDom(option.tabCon); //切换的内容

    if(!this.oTab_btn || !this.oTab_clist) return;

    this.sCur = option.cur; //激活的状态

    this.type = option.type || 'click';

    this.nLen = this.oTab_btn.length;

    this.int();

}

LGY_tab.prototype = {

    getId:function(id){

        return document.getElementById(id);

    },

    getByClassName:function(className,parent){

        var elem = [],

            node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),

            p = new RegExp("(^|\\s)"+className+"(\\s|$)");

        for(var n=0,i=node.length;n<i;n++){

            if(p.test(node[n].className)){

                elem.push(node[n]);

            }

        }

        return elem;

    },

    getDom:function(s){

        var nodeName = s.split(' '),

            p = this.getId(nodeName[0].slice(1)),

            c = this.getByClassName(nodeName[1].slice(1),p);

        if(!p || c.length==0) return null;

        return c;

    },

    change:function(){

        var cur = new RegExp(this.sCur,'g');

        for(var n=0;n<this.nLen;n++){

            this.oTab_clist[n].style.display = 'none';

            this.oTab_btn[n].className = this.oTab_btn[n].className.replace(cur,'');

        }

    },

    int:function(){

        var that = this;

        this.oTab_btn[0].className += ' '+this.sCur;

        this.oTab_clist[0].style.display = 'block';

        for(var n=0;n<this.nLen;n++){

            this.oTab_btn[n].index = n;

            this.oTab_btn[n]['on'+this.type] = function(){

                that.change();

                that.oTab_btn[this.index].className +=' ' + that.sCur;

                that.oTab_clist[this.index].style.display = 'block';

            }

        }

    }

}

原生javascript-Tab选项卡-面向对象的更多相关文章

原生javascript实现选项卡（基础版）
一.实现原理 1.主要运用“排他思想”,在设置当前元素前,先把相应元素恢复到默认状态 2.给相应元素添加下标的应用二.代码展示 <!DOCTYPE html> <html> ...
精通javascript笔记(智能社)——简易tab选项卡及应用面向对象方法实现
javascript代码(常规方式/面向过程): <script type="text/javascript"> window.onload=function(){ v ...
原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
面向对象的tab选项卡实现
利用最基础的面向对象的思想,实现tab选项卡效果: 效果截图:
原生tab选项卡
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
JavaScript 高级之面向对象
1. 对象属性及方法创建对象的方式 <script> //创建对象的方式一 var obj = {}; //创建对象的方式一 var obj = new Object(); </s ...
C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
可轮播滚动的Tab选项卡
前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...
js基础练习一之tab选项卡
最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...
原生javascript模仿win8等待进度条。
一.序言一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...

随机推荐

Mac Angular打包报错xcode-select: error: tool 'xcodebuild' requires Xcode
Mac Angular打包报错: Error: xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer ...
zabbix 4.0 安装配置
1.安装软件包: 1.安装软件包: yum install -y httpd mariadb-server mariadb php php-mysql php-gd libjpeg* php-ldap ...
Eclipse下创建Maven项目（转）
原文出自:http://www.cnblogs.com/hongwz/p/5456616.html 1.新建Maven项目 1.1 File -> New -> Other 1.2 选择M ...
spoj8222
地址: 题目: NSUBSTR - Substrings no tags You are given a string S which consists of 250000 lowercase la ...
Ubuntu安装samba实现文件夹共享
因工作需要,准备在Ubuntu服务器上共享文件夹,从Windows和Mac上都可以访问共享文件. 搜了一下,决定通过samba服务实现.安装过程如下: [step1]安装samba服务 sudo ap ...
iOS “弱账号” 暗转 “强账号”
一.背景由于某些历史原因,我们产品中50%以上活跃用户是弱账户.即客户端按照某种规则生成的一个伪id 存在keychain 里,作为这个用户的唯一标识,实现快速登录.正常情况下是不会有问题. 最近 ...
oracle过程书写规范
ORACLE存储过程编码规范 1.1 变量规范 Ø 变量名全部采用小写,局部变量名使用“v_”开头,输入参数以“i_开头,输出参数以“o_”开头,输入输出参数用io_开头 ...
[Deep Learning]任意层cnn的matlab版本实现
之前实现了一层的卷积神经网络,又实现了两层的卷积神经网络,接下来把cnn扩展到任意层就不难了. 这难道就是传说中的“道生一,一生二,二生三,三生万物”么?＝.＝代码还是在github上. 比较有趣的 ...
Java学习笔记之对象的复制和克隆
假如说你想复制一个简单变量.很简单: int apples = 5; int pears = apples; 不仅仅是int类型,其它七种原始数据类型(boolean,char,byte,short, ...
Javascript 中的 call 和 apply
发表于 2012年02月1日 by 愚人码头原文链接:http://www.css88.com/archives/4431 JavaScript 中通过call或者apply用来代替另一个对象调 ...

原生javascript-Tab选项卡-面向对象

原生javascript-Tab选项卡-面向对象的更多相关文章

随机推荐

热门专题