JavaScript tab effect (Mark current)

The Helper House (www.bkjia.com) Tutorial previously wrote an article to mark the current, and tabs, which is the essence of almost all common web page effect applications. In fact, tabs are also a form of marking the current, however, this mark is the display status of the mark.

Today, we use JS to write these common functions to make them easier to use:
Mark the current function cur (ele, cls) {}. Two functions are accepted. One is the element or selector to be marked by ele, cls is the labeled class name. A css class is "cur" by default ";
The function tab (idtab, tagtab, idcon, tagcon, act, cls, idx) {} accepts many parameters.
Idtab: controls the container of the trigger tab.
Idtag: controls the tag of the trigger tab.
Idcon: controlled content container idtag: controlled content tag act: the default trigger mode is onclick.
Cls: Mark the current css class as "cur" by default"
Idx: the default number of items displayed. The default value is 0.

The function is as follows:

Reference content is as follows: Function cur (ele, cls ){ Return new cur. prototype. init (ele, cls ); } Cur. prototype = { Init: function (ele, cls ){ This. idx = 0; This. mark = cls? "" + Cls: "cur "; This. ele = typeof ele = "object "? Ele: document. getElementById (ele ); This. hdlr. call (this ); Return this. idx; }, Hdlr: function (){ This. addCls (); This. rmvCls (); }, AddCls: function (){ This. ele. className + = this. mark; }, RmvCls: function (){ Var itm = this. ele; Var prn = itm. parentNode; Var itms = prn. getElementsByTagName (itm. nodeName ); For (I = 0; I <itms. length; I ++ ){ If (itms [I]! = Itm ){ Itms [I]. className = itms [I]. className. replace (this. mark ,""); } Else { This. idx = I; } } } } Cur. prototype. init. prototype = cur. prototype; Function tab (idtab, tagtab, idcon, tagcon, act, cls, idx ){ Return new tab. prototype. init (idtab, tagtab, idcon, tagcon, act, cls, idx ); } Tab. prototype = { Init: function (idtab, tagtab, idcon, tagcon, act, cls, idx ){ This. tabid = document. getElementById (idtab ); This. tabtag = this. tabid. getElementsByTagName (tagtab ); This. conid = document. getElementById (idcon ); This. contag = this. conid. getElementsByTagName (tagcon ); This. cls = cls | "cur "; This. act = act | "onclick "; This. idx = idx | 0; This. hdlr. call (this ); }, Hdlr: function (){ This. change. call (this ); For (var I = 0; I <this. tabtag. length; I ++ ){ Var othis = this; (Function (){ Var ii = I; Othis. tabtag [ii] [othis. act] = function (){ If (! This. className. match (othis. cls )){ Othis. idx = ii; othis. change. call (othis ); } } })() } }, Hide: function (){ This. style. display = "none "; }, Show: function (){ This. style. display = ""; }, Change: function (){ Cur (this. tabtag [this. idx]); For (var I = 0; I <this. contag. length; I ++ ){ If (I! = This. idx ){ This. hide. call (this. contag [I]); } Else { This. show. call (this. contag [I]); } } } } Tab. prototype. init. prototype = tab. prototype; // Example: Tab ("comtab", "li", "comcon", "div", "onmouseover", 0, 2 ); Tab ("comtab2", "li", "comcon2", "div "); //

From: http://www.cnblogs.com/trance/