Native javascript implements the Tab switch function _ javascript skills

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