Analyze the individual uses native JS to get the code of the class name element:
Copy Code code as follows:
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;
}
The parent parameter is optional, but you need to first determine if it exists, and it is the node DOM element parent!= undefined&&parent.nodetype==1, NodeType = 1 can determine whether the node is a DOM element, In the Firefox browser, whitespace is also a node (. childnodes), using this property to determine whether it is a DOM element, excluding whitespace.
Remove the class name of the element:
Copy Code code as follows:
var cur = new RegExp (this.scur, ' G '); This.scur is the class name, here is the use of variables to save such as: This.scur = "cur";
This.otab_btn[n].classname = this.otab_btn[n].classname.replace (cur, ");
Call Example:
Copy Code code as follows:
<!doctype html>
<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>
<body>
<div class= "Explan" >
<strong> Use reading:</strong> <br>
{' tabbtn ': ' #tabA. Tab-i ', ' tabcon ': ' #tabA. tab-c ', ' cur ': ' tab-cur '} ' required ' <br>
(1) ' tabbtn ': ' #tabA. Tab-i ', ' tabcon ': ' #tabA. Tab-c ' selector: only support #id. ClassName, (ID + space + class name) "Required" <br>
(2) ' cur ': ' tab-cur ' (default): For toggle button Current status (class name) "Must select" <br>
(3) ' type ': ' MouseOver ' | | The ' clicl ' default is to click ' Optional '
</div>
<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>
<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= "code snippet under". 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>
JS Detailed code:
Copy Code code as follows:
function lgy_tab (option) {
THIS.OTAB_BTN = This.getdom (OPTION.TABBTN);//Toggle clicked Element
This.otab_clist = This.getdom (Option.tabcon); What to switch
if (!this.otab_btn | |!this.otab_clist) return;
This.scur = Option.cur; Status of activation
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 ';
}
}
}
}
The final effect chart shows:
The effect is not very good, and compatibility is good, the code is also very concise, can replace the huge jquery tab switch plug-ins.
