首页
所有分类
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 相关文章推荐
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
brook javascript框架介绍
Oct 10 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
es6函数name属性功能与用法实例分析
Apr 18 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
无线电(12) 怀旧期刊(1) 下载(1) 短波(8) 保养(1) 长波(3) 广播(8) 中学科技(1) 烈阳天道(2) 萨拉雷(1)
You might like
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
轻松创建nodejs服务器（6）：作出响应
2014/12/18 NodeJs
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
js获取url传值的方法
2015/12/18 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
Python OpenCV之图片缩放的实现（cv2.resize）
2019/06/28 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
Python API len函数操作过程解析
2020/03/05 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
如何进行Linux分区优化
2016/09/13 面试题
亲戚结婚的请假条
2014/02/11 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
政协委员个人总结
2015/03/03 职场文书
光荣之路观后感
2015/06/12 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
2019通用版劳动合同范本！
2019/07/11 职场文书