<!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>
<style type="text/css">
*{margin:0px auto; padding:0px}
#wai{width:100%; height:500px; margin-top:30px;}
#shang{width:100%; height:50px;}
#xia{width:100%; height:450px;}
.lizi{width:100px; height:50px; float:left; text-align:center; vertical-align:middle; line-height:50px;}
.neirong{width:100%; height:450px;}
#a{background-color:#F00}
#b{background-color:#0F9; display:none}
#c{background-color:#936; display:none}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="wai">
<div id="shang">
<div class="lizi" style="background-color:#F00" guanlian="a">例子1</div>
<div class="lizi" guanlian="b">例子2</div>
<div class="lizi" guanlian="c">例子3</div>
</div>
<div id="xia">
<div class="neirong" id="a"></div>
<div class="neirong" id="b"></div>
<div class="neirong" id="c"></div>
</div>
</div>
</body>
<script type="text/javascript">
var lizij = document.getElementsByClassName("lizi");
for(var i=0;i<lizij.length;i++){
lizij[i].onclick = function(){
for(var i=0;i<lizij.length;i++){
lizij[i].style.backgroundColor ="white";
}
this.style.backgroundColor = "red";
var id = this.getAttribute("guanlian");
var nr = document.getElementsByClassName("neirong");
for(var i=0;i<nr.length;i++){
nr[i].style.display = "none";
}
document.getElementById(id).style.display = "block";
}
}
</script>
</html>
<!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>无标题文档</title>
<html>
<head>
<meta charset="utf-8">
<title>选项卡效果</title>
<style type="text/css">
*{ margin:0 auto; padding:0;}
#wai{ width:1000px; height:500px; margin-top:50px;}
#btl{width:350px; height:30px; margin-left:50px;}
.bt{ width:50px; height:30px; text-align:center; line-height:30px; float:left;}
.bt:hover{ cursor:pointer;}
.nr{ width:100%; height:450px; display:none;}
</style>
</head>
<body>
<div id="wai">
<div id="btl">
<div class="bt" sy="0" style="background-color:#999">国内</div>
<div class="bt" sy="1">国际</div>
<div class="bt" sy="2">军事</div>
<div class="bt" sy="3">财经</div>
<div class="bt" sy="4">社会</div>
<div class="bt" sy="5">娱乐</div>
<div class="bt" sy="6">体育</div>
</div>
<div class="nr" style="background-color:#F00; display:block"></div>
<div class="nr" style="background-color:#0F0"></div>
<div class="nr" style="background-color:#F60"></div>
<div class="nr" style="background-color:#00F"></div>
<div class="nr" style="background-color:#FF0"></div>
<div class="nr" style="background-color:#0FF"></div>
<div class="nr" style="background-color:#F0F"></div>
</div>
</body>
</html>
<script type="text/javascript">
var bt = document.getElementsByClassName("bt");
var nr = document.getElementsByClassName("nr");
/*
选中的标题变色，其他标题恢复原色，选中标题的对应选项卡显示，其他选项卡隐藏
*/
for(var i=0;i<bt.length;i++)
{
bt[i].onclick = function()
{
for(var i=0;i<bt.length;i++)
{
bt[i].style.backgroundColor = "#fff";
}
this.style.backgroundColor = "#999";
var syh = this.getAttribute("sy");
for(var i=0;i<nr.length;i++)
{
nr[i].style.display = "none";
}
nr[syh].style.display = "block";
}
}
</script>
