tab选项卡

给朋友做了一个页面，写了个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);

	}
}