JS給元素注冊事件的代碼

更新時間：2008年10月28日 13:48:22 作者：

麥雞的TAB切換功能代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>麥雞的TAB</title> <style> body{margin:40px; font-size:12px;} p{font-size:200%} .macji-tab a{color:#777; text-decoration:none;} .macji-tab ul.macji-nav{ position:relative; height:24px; margin:0 0 -1px; padding:0; list-style:none; overflow:hidden; } .macji-tab ul.macji-nav li a,.macji-tab ul.macji-nav li a span{ background:url(http://img.jb51.net/images/mj_bg.gif) no-repeat; } .macji-tab ul.macji-nav li{ float:left; margin-right:2px; } .macji-tab ul.macji-nav li a{ float:left; height:24px; padding:0 0 0 15px; line-height:24px; background-position:0 100%; } .macji-tab ul.macji-nav li a span{ display:block; padding:0 15px 0 0; background-position:100% 100%; } .macji-tab ul.macji-nav li a.current{ background-position:0 0; } .macji-tab ul.macji-nav li a.current span{ color:#000; background-position:100% 0; } .macji-tab div.macji-tab-container{ border:solid 1px #ccc; overflow:hidden; } .macji-tab div.macji-tab-container span{ display:none; } .macji-tab .macji-frame{ width:715px; height:47px; padding:8px; border:medium none; } </style> </head> <body> <h1>麥雞的TAB，仿淘寶便民中心</h1> <div   id="isc7sj2"   class="macji-tab"> <ul class="macji-nav"> <li><a href="http://auction1.taobao.com/auction/expressway/game_card.htm?css=frontpage"><span>游戲快充 </span></a></li> <li><a href="http://auction1.taobao.com/auction/expressway/mobile_card.htm?css=frontpage"><span>手機(jī)充值 </span></a></li> <li><a ><span>機(jī)票</span></a></li> <li><a href="http://www.dhdzp.com"><span>腳本之家</span></a></li> </ul> <div   id="pyievsj"   class="macji-tab-container"> <iframe name="macji-frame" src="http://auction1.taobao.com/auction/expressway/game_card.htm?css=frontpage" class="macji -frame" frameborder="0" scrolling="no"></iframe> </div> <div   id="jrxov7d"   class="macji-tab-container"><span>這里是用來顯手機(jī)充值的</span></div> <div   id="l3injwn"   class="macji-tab-container"><span>這里是用來顯示機(jī)票的</span></div> <div   id="o7fo2kw"   class="macji-tab-container"><span>這里是用來顯示麥雞的博客</span></div> </div> <p><a href="http://www.dhdzp.com" title="腳本之家">腳本之家&raquo;</a></p> <script type="text/javascript"> // <![CDATA[ function MacjiTab(config) { /* config container tab容器 eventType 觸發(fā)事件類型 currentClass 選中后的className num 表示默認(rèn)顯示第幾個tab */ config = { container: config.container || "macji-tab", eventType: config.eventType || "click", currentClass: config.currentClass || "current", num: config.num || 0 }; this.c = getElementsByClassName(document, config.container, "div")[0]; this.lis = this.c.getElementsByTagName("ul")[0].getElementsByTagName("a"); this.divs = this.c.getElementsByTagName("div"); var _this = this; //獲取className元素,默認(rèn)以瀏覽器原生的方法獲取(FF3,Safari) function getElementsByClassName(node, name, type) { if (node.getElementsByClassName) return node.getElementsByClassName(name); else { var r = [], re = new RegExp("(^|\\s)" + name + "(\\s|$)"), e = (node || document).getElementsByTagName(type || "*"); for ( var i = 0; i < e.length; i++ ) { if( re.test(e[i].className) ) r.push(e[i]); } return r; } } //阻止瀏覽器默認(rèn)事件 function preventDefault(ev) { if ( ev && ev.preventDefault ) ev.preventDefault(); else window.event.returnValue = false; } //克隆已有的iframe，改變其src this.createElem = function(obj, n) { var elem = this.divs[0].getElementsByTagName("iframe")[0]; if (n != 0){ var newElem = elem.cloneNode(true); newElem.src = obj.href; this.divs[n].appendChild(newElem); } obj.href = "#"; obj["on" + config.eventType] = function(){ return _this.def(n); }; }; //注冊事件 this.register = function() { for ( var i = 0; i < this.lis.length; i++ ) { this.lis[i]["on" + config.eventType] = (function(i){ return function(e){ preventDefault(e); if ( i == 3 ){ alert("哈哈，即將跳轉(zhuǎn)到我的博客去啦，留下你的PV吧，哈哈。。。"); return window.location.href = "http://www.dhdzp.com"; } _this.createElem(this, i); } })(i); } }; //TAB 默認(rèn)方法 this.def = function(n, e) { n = n || config.num; for ( var i = 0; i < this.lis.length; i++ ) { this.lis[i].className = ""; this.divs[i].style.display = "none"; } this.lis[n].className = config.currentClass; this.divs[n].style.display = ""; }; this.init = function() { this.def(); return this.register(); }; } var test = new MacjiTab({eventType: "mouseover"}); test.init(); // ]] </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: