<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡</title>
<style>
#div1{ width:900px; border:3px solid #99F;}
#div1 .active{ background-color:#FFF}
#div1 h3{ margin:0px; padding:0px; font-size:36px; float:left; background-color:#9FC; width:300px; height:100px; line-height:30px; text-align:center;}
#div1 div{ clear:both; height:400px; font-size:36px; padding:20px 0px 0px 20px; display:none;}
</style>
</head>
<body>
<div id="div1">
<h3 class="active">乔裕</h3>
<h3>纪思璇</h3>
<h3>纪小花</h3>
<div style="display:block">萧云醒</div>
<div>江乔瑾</div>
<div>江乔瑜</div>
</div>
<script>
window.οnlοad=function(){
var div = document.getElementById("div1");
var h3 = div.getElementsByTagName("h3");
var div1=div.getElementsByTagName("div");
for(var i = 0;i<h3.length;i++){
h3[i].index=i;
h3[i].οnclick=function(){
for(var i =0; i<h3.length;i++){
h3[i].className="";
div1[i].style.display="none";
}
this.className="active";
div1[this.index].style.display="block";
}
}
}
</script>
</body>
</html>