管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

原生javascript实现Tab选项卡切换功能

　　分析个人用原生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选项卡切换插件了。

教程首页 更多教程