<!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 as = document.getElementsByTagName("a");
var cons = document.getElementsByClassName("content");
//通過for循環爲所有的標題添加相同事件
for( let i = 0 ; i < as.length ; i++ ){
as[i].onclick = function(){
//排他思想 清除所有標題樣式
for( var j = 0 ; j < as.length ; j++ ){
as[j].className = "";
cons[j].style.display = "none";
}
//留下當前操作的標題樣式
this.className = "on";
//操作當前標題對應的內容顯示
cons[i].style.display = "block";
}
}
</script>
