看了慕課網上關於tabs 切換後 寫的 。 DOM 的瞭解更深刻了些，不過盒子模型還是不怎麼會，只會簡單的，繼續努力。
<!doctype html>
<html>
<head>
<meta charset= "utf-8">
<title>Tab切換</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
list-style: none;
font-size: 12px;
}
.tabs{
width:298px;
height:98px;
margin:10px;
border:1px solid #eee;
overflow: hidden;
}
.tabs-tit{
height:27px;
position:relative;
background-color:#f7f7f7;
}
.tabs-tit ul{
position:absolute;
width:301px;
left: -1px;
}
.tabs-tit li{
float: left;
width: 58px;
height:26px;
line-height: 26px;
text-align: center;
overflow: hidden;
background: #f7f7f7;
border-bottom: 1px solid #eee;
padding: 0 1px ;
}
.tabs li a:link,.tabs-tit a:visited{
text-decoration: none;
color: blue;
}
.tabs li a:hover{
color:#f90;
}
.tabs li.select{
background: #fff;
border-bottom-color: #fff;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
padding: 0px;
font-weight: bolder;
}
.tabs-con .mod{
margin: 10px,10px,10px,10px;
}
.tabs-con .mod ul li{
float: left;
width: 134px;
height: 25px;
overflow: hidden;
}
</style>
<script type="text/javascript">
window.onload = function(){
var titles = document.getElementById("tabs-tit").getElementsByTagName("li");
var divs = document.getElementById("tabs-con").getElementsByTagName("div");
//遍歷title 下所有的li, 綁定事件
for(var i = 0;i < titles.length;i++){
titles[i].id = i;
titles[i].onclick = function(){
//清除所有Li 上的class
for(var j = 0;j < divs.length;j++){
divs[j].style.display = "none";
titles[j].className = "";
}
divs[this.id].style.display = "block";
this.className = "select";
}
}
}
</script>
</head>
<body>
<div id = "tabs" class = "tabs">
<!-- 標籤欄-->
<div id = "tabs-tit" class = "tabs-tit">
<ul>
<li class = "select"><a href = "#">1</a></li>
<li><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#">5</a></li>
</ul>
</div>
<!-- 內容欄-->
<div id = "tabs-con" class = "tabs-con">
<div id = "mod" class = "mod" style = "display:block">
<ul>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
</ul>
</div>
<div id = "mod" class = "mod" style = "display:none">
<ul>
<li>22</li>
<li>22</li>
<li>22</li>
<li>22</li>
</ul>
</div>
<div id = "mod" class = "mod" style = "display:none">
<ul>
<li>33</li>
<li>33</li>
<li>33</li>
<li>33</li>
</ul>
</div>
<div id = "mod" class = "mod" style = "display:none">
<ul>
<li>44</li>
<li>44</li>
<li>44</li>
<li>44</li>
</ul>
</div>
<div id = "mod" class = "mod" style = "display:none">
<ul>
<li>55</li>
<li>55</li>
<li>55</li>
<li>55</li>
</ul>
</div>
</div>
</div>
</body>
</html>
