1.1 介紹
這里提供了一種實(shí)現(xiàn)選項(xiàng)卡的思路瘪校。在實(shí)現(xiàn)過(guò)程中首先考慮的是html結(jié)構(gòu)向挖，元素如何擺放剑令，此外通過(guò)這樣的擺放舌镶，通過(guò)CSS樣式是否可以達(dá)到我們所要的效果柱彻。最后通過(guò)js進(jìn)行監(jiān)聽(tīng)，當(dāng)進(jìn)行選項(xiàng)卡切換時(shí)餐胀，我們可以對(duì)所有內(nèi)容進(jìn)行隱藏哟楷，之后再對(duì)選中的內(nèi)容進(jìn)行顯示以達(dá)到切換的效果。
1.2 實(shí)現(xiàn)的HTML代碼
<div id="app">
<ul id="tab-tilte" class="tab-tilte">
<li class="active">標(biāo)題一</li>
<li>標(biāo)題二</li>
<li>標(biāo)題三</li>
<li>標(biāo)題四</li>
</ul>
<div class="tab-content" id="tab-content">
<div style="display: block;">內(nèi)容一</div>
<div style="display: none;">內(nèi)容二</div>
<div style="display: none;">內(nèi)容三</div>
<div style="display: none;">內(nèi)容四</div>
</div>
</div>
1.3實(shí)現(xiàn)的CSS樣式
<style type="text/css">
ul li {
margin: 0;
padding: 0;
list-style: none;
}
#app {
width: 600px;
height: 400px;
margin: 0 auto;
border: 1px solid #ccc;
}
.tab-tilte {
width: 90%;
}
.tab-tilte li {
float: left;
width: 25%;
padding: 10px 0;
text-align: center;
background-color: #f4f4f4;
cursor: pointer;
}
/* 點(diǎn)擊對(duì)應(yīng)的標(biāo)題添加對(duì)應(yīng)的背景顏色 */
.tab-tilte .active {
background-color: #09f;
color: #fff;
}
.tab-content div {
float: left;
width: 25%;
line-height: 100px;
text-align: center;
}
</style>
展示的靜態(tài)效果（沒(méi)有動(dòng)效）:
預(yù)覽1.png
1.4添加js代碼
<script type="text/javascript">
var oUi=document.getElementById("tab-tilte");
var tabCon=document.getElementById("tab-content");
var oLi=oUi.getElementsByTagName("li"); //獲取tab標(biāo)題下面的li集合
var oDiv=tabCon.getElementsByTagName("div"); //獲取tab內(nèi)容面的div集合
for(var i=0;i<oLi.length;i++){
oLi[i].index=i; //定義index變量 以便于tab標(biāo)題和tab內(nèi)容互相對(duì)應(yīng)
oLi[i].onclick=function(){
for(var j=0;j<oLi.length;j++){
oLi[j].className="";
oDiv[j].style.display="none";
}
this.className="active"; //為當(dāng)前的tab添加樣式
oDiv[this.index].style.display="block";
}
}
</script>
展示最終效果圖:
預(yù)覽2
