给朋友做了一个页面，写了个tab选项卡 的效果，把这部分分享给大家。
js很简单，唯一的难点就是循环绑定事件的时候要用到闭包，看大家说闭包很难，我没觉的难啊，可能是我还没应用到复杂的地方。
个人理解，闭包：就是函数引用外部变量嘛。
附件里面的css是整个页面的，这个css被朋友用sharepoint整理过，弄的乱七八糟，看着就烦啊，懒的摘tab这部分了。（sharepoint真垃圾啊）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script src="js/common.js" type="text/javascript" ></script> </head> <body> <div id="wrd"> <div id="wrdMenu"> <a href="#" class="wrd_select_0">雨情</a> <a href="#">水情</a> <a href="#">旱情</a> </div> <div id="wrd-0"> <a href="#">详情...</a> <h2>content-1</h2> </div> <div id="wrd-1" style=" display:none;"> <a href="#">详情...</a> <h2>content-2</h2> </div> <div id="wrd-2" style=" display:none;"> <a href="#">详情...</a> <h2>content-3</h2> </div> </div> <script> tab("wrdMenu","wrd-","wrd_select_"); tab("column_content_title","column_content_","column_select_"); </script> </body></html>
/** * @author Tiger * 2009-4-25 */function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } }}function hasClass(element, className) { var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); return element.className.match(reg); } function addClass(element, className) { if (!this.hasClass(element, className)) { element.className += " "+className; } } function removeClass(element, className) { if (hasClass(element, className)) { var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); element.className = element.className.replace(reg,' '); } } function tab(id,content,cssname){// id是tab选项卡所在id;content是tab对应内容所在id;cssname是tab选项卡选中状态的class,每个tab选项卡用的class不一样 var iid = document.getElementById(id).getElementsByTagName('a'); for(var i=0; i<iid.length; i++){ (function(){ var cssName = cssname + i; var p = i; iid[i].onmousemove = function(){ for(var j=0;j<iid.length; j++){ removeClass(iid[j], (cssname+j)); var cid = document.getElementById(content+j); cid.style.display="none"; } addClass(this, cssName); var c = document.getElementById(content+p); c.style.display="block"; } })(i); }}
