Native javascript implements the Tab switch function _ javascript skills

Source: Internet
Author: User
This article mainly introduces the use of native javascript to implement the Tab switch function. Although jQuery has many similar plug-ins, a single jQuery library is really a bit huge, this small function is just done directly with javascript. Analyze the code for individuals to obtain class name elements using native JS:

The 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 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:

The 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:

The Code is as follows:






Document




Usage:

{'Tabbtn ':' # tabA. tab-I ', 'tabcon': '# tabA. tab-C', 'cur': 'tab-cur'} (required]

(1) 'tabbtn ':' # tabA. tab-I ', 'tabcon': '# tabA. tab-C' selector: only # id is supported. className, (ID + space + class name) [required]

(2) 'cur': 'tab-cur' (default): indicates the current status of the switch button (Class Name). (required]

(3) 'type': 'mouseover' | 'clicl' click [Optional] by default]


TabA
new LGY_tab({'tabBtn':'#tabA .tab-i',
'tabCon':'#tabA .tab-c',
'cur':'tab-cur'
});



  • Btn-

  • Btn-B


Con-


Con-B


TabB

new LGY_tab({'tabBtn':'#tabB .tab-i',
'tabCon':'#tabB .tab-k',
'cur':'tab-cur02',
'type':'mouseover'
});



  • Btn-

  • Btn-B

  • Btn-C


Con-


Con-B


Con-C



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.