原生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的为attr添加id title等效果的实现代码
Apr 20 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
React简单介绍
May 24 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 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
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
javascript回车完美实现tab切换功能
2014/03/13 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
Python自动连接ssh的方法
2015/03/07 Python
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
心理健康心得体会
2014/01/02 职场文书
普宁寺导游词
2015/02/04 职场文书
博士生专家推荐信
2015/03/25 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python