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 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>手机充值 </span></a></li> <li><a href="http://www.taobao.com/expressway/et-auto.php"><span>机票</span></a></li> <li><a href="https://www.jb51.net"><span>脚本之家</span></a></li> </ul> <div 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 class="macji-tab-container"><span>这里是用来显手机充值的</span></div> <div class="macji-tab-container"><span>这里是用来显示机票的</span></div> <div class="macji-tab-container"><span>这里是用来显示麦鸡的博客</span></div> </div> <p><a href="https://www.jb51.net" title="脚本之家">脚本之家&raquo;</a></p> <script type="text/javascript"> // <![CDATA[ function MacjiTab(config) { /* config container tab容器 eventType 触发事件类型 currentClass 选中后的className num 表示默认显示第几个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元素,默认以浏览器原生的方法获取(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; } } //阻止浏览器默认事件 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("哈哈，即将跳转到我的博客去啦，留下你的PV吧，哈哈。。。"); return window.location.href = "https://www.jb51.net"; } _this.createElem(this, i); } })(i); } }; //TAB 默认方法 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需再刷新一下页面才能执行]

您可能感兴趣的文章:

js 获取计算后的样式写法及注意事项
复合样式：currentStyle;注意在获取复合样式时要单独写,不能写background,接下来将详细介绍下实现方法，感兴趣的你可不要错过了哈
2013-02-02
理解javascript中的闭包
本文主要介绍了javascript中闭包的特性、作用、示例代码以及注意事项。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
用innerhtml提高页面打开速度的方法
这篇文章介绍了用innerhtml提高页面打开速度的方法，有需要的朋友可以参考一下
2013-08-08
javascript如何使用函数random来实现课堂随机点名方法详解
这篇文章主要介绍了javascript如何使用函数random来实现课堂随机点名方法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
JavaScript通过join函数连接数组里所有元素的方法
这篇文章主要介绍了JavaScript通过join函数连接数组里所有元素的方法,实例分析了javascript中join函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
echarts图形x、y坐标文字设置间隔显示及相关问题详解
最近在做一个web的数据统计部分用到了Echart,下面这篇文章主要给大家介绍了关于echarts图形x、y坐标文字设置间隔显示及相关问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
javascript实现消灭星星小游戏简单版
消灭星星是一款经典的益智手游,单位里看到同事天天在手机上玩的游戏，现在也有web版了,出于业余爱好，自己尝试用javascript实现了下，就是略简单了点，文中给出了完整的实例代码，大家可以自行完善！！下面来一起看看吧。
2016-11-11
JavaScript中prompt()函数的用法实战例子
JavaScript中的prompt是一个函数,用于在浏览器中显示一个对话框,提示用户输入一些信息,这篇文章主要给大家介绍了关于JavaScript中prompt()函数的用法实战,需要的朋友可以参考下
2023-11-11
小程序视频列表中视频的播放与停止的示例代码
本篇文章主要介绍了小程序视频列表中视频的播放与停止的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Bootstrap模态框（Modal）实现过渡效果
这篇文章主要为大家详细介绍了Bootstrap模态框（Modal）实现过渡效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03