原生javascript实现Tab选项卡切换功能


Posted in Javascript onJanuary 12, 2015

分析个人用原生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选项卡切换功能

效果是不是很棒呢,而且兼容性也不错,代码也很简洁,完全可以替代庞大的jQuery选项卡切换插件了。

Javascript 相关文章推荐
jQuery 名称冲突的解决方法
Apr 08 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
推荐4个原生javascript常用的函数
Jan 12 #Javascript
原生js实现日期联动
Jan 12 #Javascript
Javascript中innerHTML用法实例分析
Jan 12 #Javascript
js实现从数组里随机获取元素
Jan 12 #Javascript
javascript的tab切换原理与效果实现方法
Jan 10 #Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 #Javascript
js中键盘事件实例简析
Jan 10 #Javascript
You might like
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
JavaScript 原型继承
2011/12/26 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
wxpython绘制圆角窗体
2019/11/18 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
python实现批处理文件
2020/07/28 Python
python 下载文件的多种方法汇总
2020/11/17 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
北京SQL新华信咨询
2016/09/30 面试题
自我鉴定书范文
2013/10/02 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
最美护士演讲稿
2014/08/27 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
小学庆六一主持词
2015/06/30 职场文书
关于车尾的标语大全
2015/08/11 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL