原生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 16 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
js实现动态时钟
Mar 12 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 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破解防盗链图片的一个简单方法
2014/06/07 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python文件写入实例分析
2015/04/08 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
关于Python作用域自学总结
2019/06/10 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
《社戏》教学反思
2014/04/15 职场文书
网络技术专业求职信
2014/07/13 职场文书
超市周年庆活动方案
2014/08/16 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL