網(LieHuo.Net)教程 早先寫過一篇文章說 標記當前，和選項卡，幾乎是目前所有常見網頁效果應用的本質，其實 選項卡也是一種形式的標記當前，只不過這種標記是標記的顯示狀態罷了。
今天我們用JS的方法寫一下這些常用的函數，使它們使用起來更加方便：
標記當前 function cur(ele,cls){} 接受兩個函數 一個是ele 要標記的元素 或者 一個選擇符，cls是標記的類名 一個css class 默認為"cur";
選項卡 function tab(idtab,tagtab,idcon,tagcon,act,cls,idx){} 接受的參數比較多
idtab:控制觸發選項卡的容器
idtag:控制觸發選項卡的標簽
idcon:被控制的內容容器idtag:被控制的內容標簽act: 觸發方式 默認為 onclick
cls:標記當前的css class 默認為 “cur”
idx:默認顯示第幾項 默認為0 首項
函數如下：
| 以下為引用的內容： 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; //使用范例： tab("comtab","li","comcon","div","onmouseover",0,2); tab("comtab2","li","comcon2","div"); // |
來自：http://www.cnblogs.com/trance/
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
