精巧支付寶導航條製作教學

其實也不算教程，也就是自己沒事的時候做點東西然後發上來大家交流交流，希望大家不吝賜教^!^

因為剛看過亞東的教學和這個有點相似，所以就自己琢磨了一下寫了一個只用到一小段的JS就搞定了。亞東的裡面要用到JQuery。我感覺要是簡單一點的東西直接上JS就行了，有大量需求時再呼叫函式庫才好。

核心HTML程式碼如下：

注意：

1. 選單項目是可以自由擴充的，前提是複製程式碼中類別名為“sub-item”紅色清單標籤。也就是copy這個ul標籤的所有內容貼其後就行。
2. 類別名為「sub-item」清單標籤ul的id屬性依次類別加就OK了，如：sub-item1,sub-item2,sub-item3…
3. 類別名為「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";
}
}
}
}
}

JS程式碼就不多做解釋了，重要部分我已經給註解。因為我也是，費了很大勁才實現效果，還希望高手多指點點。

CSS程式碼有點小多我就不貼出來了，其實核心程式碼就那幾句，主要為了仿製得完美就得多寫一點啦！有興趣的同學直接下載我的原始碼研究。有什麼問題直接留言給我^!^