<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style type="text/css">
*{margin: 0; padding: 0; font-family: "微软雅黑";font-size: 14px;}
#container{
width: 398px;
margin: 100px auto;}
#container a{
display:block ;
width: 98px;
height: 42px;
line-height: 42px;
text-align: center;
float: left;
border-top: solid 1px #FF4400;
border-bottom: solid 1px #FF4400;
border-left: solid 1px #FF4400;
color: #333333;
text-decoration: none;
}
#container a:hover{
color: #FF4400;
}
.content{
width: 355px;
height: 140px;
text-align: center;
border-right: solid 1px #FF4400;
border-bottom: solid 1px #FF4400;
border-left: solid 1px #FF4400;
padding: 30px 0 0 40px;
display: none;
}
.clear{clear: left;}
#container a.on{ background: #FF4400; color: #fff;}
</style>
</head>
<body>
<div id="container">
<a href="#" class="on">充话费</a>
<a href="#">充流量</a>
<a href="#">充固话</a>
<a href="#" style="border-right: solid 1px #FF4400;">充宽带</a>
<div class="clear"></div>
<div class="content" style="display:block;">
<img src="images/1.png" />
</div>
<div class="content">
<img src="images/2.png" />
</div>
<div class="content">
<img src="images/3.png" />
</div>
<div class="content">
<img src="images/4.png" />
</div>
</div>
</body>
</html>
<script type="text/javascript">
//页面结构分析 ： 保证标题的下标和内容的下标一一对应
var bts = document.getElementsByTagName("a");
// 为四个标题对应添加属性 用来存储每一个标题在页面中的下标
/*bts[0].index = 0;
bts[1].index = 1;
bts[2].index = 2;
bts[3].index = 3;*/
/*for( var i = 0 ; i < bts.length ; i++ ){
bts[i].index = i;
}*/
var cons = document.getElementsByClassName("content");
//第一步 ： 为四个标题添加相同的事件
for( var i = 0 ; i < bts.length ; i++ ){
bts[i].index = i;//为四个标题对应添加属性 用来存储每一个标题在页面中的下标
bts[i].onmouseover = function(){
//第三步 ： 排他思想
//先通过循环清空所有的标题样式 隐藏所有的内容
for( var j = 0 ; j <bts.length ; j++ ){
bts[j].className = "";
cons[j].style.display = "none";
}
//第二步 ： 为当前操作的标题添加类 on
this.className = "on";
//第四步 ：根据当前操作的标题显示对应的内容
// 通过当前操作标题的下标 查找 对应的内容
cons[ this.index ].style.display = "block";
}
}
</script>