Home > Developer > JavaScript
Native javascript implements the Tab switch function, including javascripttab
Analyze the code for individuals to obtain class name elements using native JS:
Copy codeThe Code is 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 must first determine whether it exists and is the node dom element parent! = Undefined & parent. nodeType = 1, nodeType = 1 can be used to determine whether the node is a dom element. In Firefox, the blank space is also a node (. childnodes), this attribute is used to determine whether it is a dom element, exclude blank characters.
Class Name of the removed element:
Copy codeThe Code is as follows:
Var cur = new RegExp (this. sCur, 'G'); // this. sCur is the class name, which is saved with variables such as this. sCur = "cur ";
This. oTab_btn [n]. className = this. oTab_btn [n]. className. replace (cur ,'');
Call example:
Copy codeThe Code is as follows:
<! 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: pixel PX ;}
. Box. tab-cur02 {background-color: #025023 ;}
</Style>
</Head>
<Body>
<Div class = "explan">
<Strong> usage: </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 # id is supported. className, (ID + space + class name) [required] <br>
(2) 'cur': 'tab-cur' (default): indicates the current status of the switch button (Class Name). (required) <br>
(3) 'type': 'mouseover' | 'clicl' click [Optional] by default]
</Div>
<H3> tabA <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 <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 below. 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 Code details:
Copy codeThe Code is as follows:
Function LGY_tab (option ){
This. oTab_btn = this. getDom (option. tabBtn); // switch the clicked element.
This. oTab_clist = this. getDom (option. tabCon); // switch content
If (! This. oTab_btn |! This. oTab_clist) return;
This. sCur = option. cur; // activation status
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 ';
}
}
}
}
Final Presentation:
The results are good, the compatibility is good, and the code is concise. It can completely replace the huge jQuery tab switch plug-in.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
