首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生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实现Tab选项卡切换功能

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
编写兼容IE和FireFox的脚本
May 18 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 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
增删查改(1) SQL注入(2) #{}(1) 外键(1) IC-R9500(1) canvas(2) 代理(2) 克隆(1) 脏读(2) 选择器(1)
You might like
Admin generator, filters and I18n
2011/10/06 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
php页面防重复提交方法总结
2013/11/25 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
sina的lightbox效果。
2007/01/09 Javascript
jQuery select控制插件
2009/08/17 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
Javascript排序算法之合并排序（归并排序）的2个例子
2014/04/04 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
javascript History对象原理解析
2020/02/17 Javascript
js实现从右往左匀速显示图片（无缝轮播）
2020/06/29 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
GAZMAN官网：澳大利亚领先的男装品牌
2019/12/19 全球购物
Johnson Fitness澳大利亚：高级健身器材
2021/03/16 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
社区党员先进事迹
2014/01/22 职场文书
团干部培训方案
2014/06/03 职场文书
会计电算化实训报告
2014/11/04 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS