原生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 动画基础教程
Dec 25 Javascript
JQuery与iframe交互实现代码
Dec 24 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
推荐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+MSSQL分页的例子
2006/10/09 PHP
E路文章系统PHP
2006/12/11 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
python使用urlparse分析网址中域名的方法
2015/04/15 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
存储过程和函数的区别
2013/05/28 面试题
软件测试常见笔试题
2012/02/04 面试题
常见的软件开发流程有哪些
2015/11/14 面试题
个人工作总结范文2014
2014/11/07 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
MySQL 数据类型选择原则
2021/05/27 MySQL
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python