tab選項卡切換效果在大部分的網站上都能看到，這是一個很有用的效果。下面先簡單地說下這個效果的實現原理和思路。
tab選項卡說白了就是n個標籤對應n個模塊的內容，點到哪個標籤，與之相對應的內容就會被顯示，其他的內容被隱藏。標籤部分一般用一個無序列表，顯示的內容部分則用<div class="mode">...</div>這樣的包裹層包裹起來。
實現步驟：
1.獲取標籤<li>..</li>數組
2.獲取顯示的內容的<div class="mode'>..</div>數組。
3.將他們一一對應，設置顯示的樣式。
說起來還是比較麻煩的，直接上源碼，這個源碼很簡單，沒有過多的CSS樣式，純粹的是爲了演示tab選項卡的效果，不怎麼美觀。但代碼比較簡單，一看就懂。下面的源碼是可以直接運行的
html部分：
<body>
<!-- 最外層的div是一個包裹整個tab選項卡的包裹層-->
<div id="wrap">
<div id="title">
<!-- 標題部分通常用一個無序列表來表示-->
<ul>
<li><a href="#">標題一</a></li>
<li><a href="#">標題二</a></li>
<li><a href="#">標題三</a></li>
<li><a href="#">標題四</a></li>
<li><a href="#">標題五</a></li>
</ul>
</div>
<div id="content">
<!-- 下面的是要顯示的內容。一個div對應標題裏面的一個標籤-->
<div class="mod">
<p>我是標籤<b>一</b>，我是標籤<b>一</b>，我是標籤<b>一</b>，我是標籤<b>一</b>，我是標籤<b>一</b>，</p>
</div>
<div class="mod" style="display: none;">
<p>我是標籤<b>二</b>，我是標籤<b>二</b>，我是標籤<b>二</b>，我是標籤<b>二</b>，我是標籤<b>二</b>，</p>
</div>
<div class="mod" style="display: none;">
<p>我是標籤<b>三</b>，我是標籤<b>三</b>，我是標籤<b>三</b>，我是標籤<b>三</b>，我是標籤<b>三</b>，</p>
</div>
<div class="mod" style="display: none;">
<p>我是標籤<b>四</b>，我是標籤<b>四</b>，我是標籤<b>四</b>，我是標籤<b>四</b>，我是標籤<b>四</b>，</p>
</div>
<div class="mod" style="display: none;">
<p>我是標籤<b>五</b>，我是標籤<b>五</b>，我是標籤<b>五</b>，我是標籤<b>五</b>，我是標籤<b>五</b>，</p>
</div>
</div>
</div>
</body>CSS部分：
<style>
*{padding: 0;margin: 0;}
#wrap{
width: 500px;
height: 500px;
margin: 50px auto;
border:1px solid black;
}
#title{
height: 30px;
background-color: darkgray;
}
#title ul{
width: 100%;
list-style: none;
}
#title ul li{
display: inline-block;
width: 90px;
float: left;
padding: 5px;
text-align: center;
}
#title ul li a{
color: white;
text-decoration: none;
}
#title ul li:hover{
background-color: black;
color: white;
}
</style>JS部分：
<script>
window.οnlοad=function(){
//獲取標題列表
var oparent=document.getElementById("title");
var lis=oparent.getElementsByTagName("li");
//獲取展示內容的列表
var mods=document.getElementById("content");
var divs=mods.getElementsByClassName("mod");
//遍歷lis
for(var i=0;i<lis.length;i++){
lis[i].id=i;
//爲每個元素添加滑動事件
lis[i].οnmοuseοver=function(){
//先清除其他的樣式
for(var j=0;j<lis.length;j++){
divs[j].style.display="none";
}
//被點擊的標籤所對應的內容顯示
divs[this.id].style.display="block";
}
}
}
</script>這樣，這個tab選項卡的效果就實現了。
