原生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 相关文章推荐
javascript IFrame 强制刷新代码
Jul 23 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
js css自定义分页效果
Feb 24 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 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
我的论坛源代码(七)
2006/10/09 PHP
php调用c接口无错版介绍
2014/03/11 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
js创建数组的简单方法
2016/07/27 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
python服务器端收发请求的实现代码
2014/09/29 Python
python使用多线程不断刷新网页的方法
2015/03/31 Python
Django框架中方法的访问和查找
2015/07/15 Python
Python ftp上传文件
2016/02/13 Python
python万年历实现代码 含运行结果
2017/05/20 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
python分布式环境下的限流器的示例
2017/10/26 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
Python面向对象类的继承实例详解
2018/06/27 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
Python类装饰器实现方法详解
2018/12/21 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
英国景点门票网站:attractiontix
2019/08/27 全球购物
黄继光的英雄事迹材料
2014/02/13 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
教师节主题班会方案
2015/08/17 职场文书
晚会开幕词范文
2016/03/04 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
使用python创建股票的时间序列可视化分析
2022/03/03 Python
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis