Native JavaScript implements tab tab switch function _javascript tips

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.