简单标签页实现
<!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>无标题文档</title>
</head>
<style type="text/css">
#tab {
width:100%;
position:relative;
}
/*选中的容器*/
#tab h3 {
float:left;
width:115px;
height:26px;
line-height:26px;
font-family: Arial;
text-align:center;
color:navy;
background:#eee url(images/Tag_tab.gif) no-repeat;
}
/*默认标题样式*/
#tab .up {
background:#fff url(images/Tag_tab1.gif) no-repeat;
bgcolor:#8DB9DC;
}
</style>
<body scroll="no">
<div id="tab">
<h3 id="hh1" >新浪</h3>
<h3 id="hh2" >网易</h3>
<h3 id="hh3" >百度</h3>
<h3 id="hh4" >JavaEye</h3>
</div>
<iframe style="display:none" src="http://www.sina.com" id="if1" name="if1" width="100%" style="height:740px" frameborder="0" ></iframe>
<iframe style="display:none" src="" id="if2" name="if2" width="100%" style="height:740px" frameborder="0" ></iframe>
<iframe style="display:none" src="" id="if3" name="if3" width="100%" style="height:740px" frameborder="0" ></iframe>
<iframe style="display:none" src="" id="if4" name="if4" width="100%" style="height:740px" frameborder="0" ></iframe>
<script type="text/javascript">
function goto(a,b,c,d){
//显示
document.getElementById("hh"+a).className=" up";
document.getElementById("if"+a).style.display="block";
if(a==2){
document.getElementById("if"+a).src="http://www.163.com";
}
else if(a==3){
document.getElementById("if"+a).src="http://www.baidu.com";
}
else if(a==4){
document.getElementById("if"+a).src="http://www.iteye.com";
}
//隐藏
document.getElementById("hh"+b).className="";
document.getElementById("if"+b).style.display="none";
document.getElementById("hh"+c).className="";
document.getElementById("if"+c).style.display="none";
document.getElementById("hh"+d).className="";
document.getElementById("if"+d).style.display="none";
}
</script>
</body>
</html>
页:
[1]