介紹支付寶導航條的制作過程，這類TAB很普遍，許多網站都會使用，用的這類導航條，本文算不上什麼深奧的技術，只是探討下這種導航效果的實現過程。
其實也算不上教程，也就是自己沒事兒的時候做點東西然後發上來大家交流交流，希望大家不吝賜教^!^
因為剛看過亞東的教程和這個有點相似，所以就自己琢磨了一下寫了一個僅用到一小段的JS就搞定了。亞東的裡面要用到JQuery。我感覺要是簡單一點的東西直接上JS就行了，有大量需求時再調用庫才好。
核心HTML代碼如下：
<div id="menu">
<div id="top"><!–橙色菜單項部分：此標簽作用在於滑動門效果的實現—>
<ul id="item"><!–列表項li可自由添加與修改 –>
<li id="item1"><a href="#"><span>前端開發</span></a></li>
<li id="item2" class="active"><a href="#"><span>我要付款</span></a></li>
<li id="item3"><a href="#"><span>網站開發</span></a></li>
<li id="item4"><a href="#"><span>交易管理</span></a></li>
<li id="item5"><a href="#"><span>我的支付寶</span></a></li>
<li id="item6"><a href="#"><span>安全中心</span></a></li>
<li id="item7"><a href="#"><span>商家服務</span></a></li>
<li class="ext1"></li><!–額外的標簽用於定位菜單項右上圓角 –>
</ul>
</div>
<div id="bot"><!–灰色子菜單項部分：此標簽作用也在於滑動門效果的實現–>
<ul class="sub-item" id="sub-item1">
<li><a href="#"><span>HTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>JavaScript</span></a></li>
<li><a href="#"><span>ActionScript</span></a></li>
<li><a href="#"><span>Photoshop</span></a></li>
<li><a href="#"><span>Fireworks</span></a></li>
<li><a href="#"><span>Flash</span></a></li>
<li class="ext2"></li><!–額外的標簽用於定位菜單項右下圓角 –>
</ul>
</div>
</div>
- 菜單項是可以自由擴展的，前提是復制代碼中類名為“sub-item”紅色列表標簽。也就是copy這個ul標簽的所有內容粘貼其後就行。
- 類名為“sub-item”列表標簽ul的id屬性依次類加就OK了，如：sub-item1,sub-item2,sub-item3…
- 類名為“active”的藍色列表標簽表示載入時的默認菜單項。
核心JavaScript代碼：
主要功能是：子菜單項隨著菜單項變化而變化的效果(類似tab選項卡)。
window.onload = function() {
for( i=1; i<8; i++ ){
var nodeItem = document.getElementById("item"+i); //遍歷每個菜單項增加 onClick事件
nodeItem.onclick = function() {
/*菜單激活動態樣式*/
for( n=0; n<6; n++){
document.getElementsByTagName("li")[n].className = "";
//alert(this.className);
}
this.className = "active";
var linkNode = parseInt( this.id.substring(4,5) );
for ( j=1; j<10; j++){ //按順序匹配菜單項和菜單內容
var nodeSubItem = document.getElementById("sub-item"+j);
if ( linkNode == j ){ //如果菜單項和菜單內容匹配則顯示，否則隱藏
nodeSubItem.style.display = "block";
}else{
nodeSubItem.style.display = "none";
}
}
}
}
}
CSS代碼有點小多我就不貼出來了，其實核心代碼就那幾句，主要為了仿制得完美就得多寫一點啦！有興趣的同學直接下載我的源碼研究。有什麼問題直接給我留言^!^