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=utf-8" />
<title>Tab切换</title>
<style type="text/css">
	#tab{width:400px;}
	#tab ul{ list-style:none;overflow:hidden;margin:0px;padding:0px;}
	#tab ul li{float:left;padding:5px 10px;border:1px solid #eee;cursor:pointer;
		}
	#tab ul li.cur{background-color:green;}
	#tab .content{width:100%;border:1px solid #eeeeee;height:100px;}
</style>
<script type="text/javascript">
	window.onload=function(){
		//所有选项卡标签
		var olis = document.getElementsByTagName("li");
		for(var i=0;i<olis.length;i++){
			olis[i].index = i;
			olis[i].onmouseover = function(){
				for(var j=0;j<olis.length;j++){
				document.getElementById("content-"+j).style.display="none";
				olis[j].className="";
				}
			document.getElementById("content-"+this.index).style.display="block";
			olis[this.index].className="cur";			
		    }
		}
     }
</script>
</head>
<body>
<div id="tab">
    <ul>
        <li class="cur">tab1</li>
        <li >tab2</li>
        <li >tab3</li>
    </ul>
    <div id="c-box">
    	<div class="content" id="content-0">tab-1第一个容器内容</div>
        <div class="content" id="content-1" style="display:none;">tab-2第二个容器内容</div>
        <div class="content" id="content-2" style="display:none;">tab-3第三个容器内容</div>
    </div>        
</div>
</body>
</html>

===========================================================================

script type="text/javascript">
window.onload=function (){
	var oDl=document.getElementsByTagName("dl");
	var oLi=document.getElementsByTagName("li");
	for(var i=0;i<oLi.length;i++){
		oLi[i].onmouseover=function(){
				for(var j=0;j<oDl.length;j++){
					oDl[j].style.display="none";
				}
			var dl=this.getElementsByTagName("dl");
			if(dl.length>0){
				dl[0].style.display="block";
				}
		}
		oLi[i].onmouseout=function(){
			for(var j=0;j<oDl.length;j++){
				oDl[j].style.display="none";
			}	
		}							
	}			
}
</script>

猜你喜欢