原生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 相关文章推荐
js判断字符长度及中英文数字等
Mar 19 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
js实现选项卡效果
Mar 07 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 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下过滤HTML代码的函数
2007/12/10 PHP
使用PHP的日期与时间函数技巧
2008/04/24 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
pyshp创建shp点文件的方法
2018/12/31 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
基于python实现计算两组数据P值
2020/07/10 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
车间工艺员岗位职责
2013/12/09 职场文书
《长征》教学反思
2014/04/27 职场文书
2014年公司工作总结
2014/11/22 职场文书
追悼会答谢词
2015/01/05 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript