JQuery Tab控件篇

步驟一：導入jQuery程式庫及調用Tab控件語法

jQuery程式庫可從官方網站自行下載最新版本(1.3.2)或直接調用Google提供的API。
Tab控件語法於此處下載(1KB)，將檔案解壓縮後放至於您主機上或方便運用的空間。
將下面語法複製貼於head開始與結束標籤之間的適當位置：

設置如下圖(請自行修改jquery.tabs.js檔案所放置的位置)：

導入jQuery程式庫及調用Tab控件語法

步驟二：加入Tab控件所使用的CSS語法

以WordPress為例，請於style.css內新增下列語法：

/* jquery-tabs格式 */

.jquery-tabs{background-color:#FAFAFA;}
.jquery-tabs p span{background-color:#EFEFEF;border:1px solid
#CCCCCC;cursor:pointer;margin-right:2px;padding:2px 3px;}
.jquery-tabs p span.current{background-color:#FAFAFA; border-bottom-color:#fafafa;}
.jquery-tabs p{border-bottom:1px solid #CCCCCC;font-weight:bold;padding:0 10px 2px;}
.jquery-tabs li{border-bottom:1px dotted #CCCCCC;padding-bottom:3px;margin:5px 0;}
.jquery-tabs .mhot,.jquery-tabs.allhot{display:none;}

步驟三：加入Tab控件語法

範例為三個頁籤，請自行依使用狀況增減。^_^

第一個頁籤標題
第二個頁籤標題
第三個頁籤標題

第一個頁籤內容(圖片或文字)

第二個頁籤內容(圖片或文字)

第三個頁籤內容(圖片或文字)

OK，所有設置完畢，自行檢查試驗jQuery的效果吧。^_^

附註：

1. jQuery具有跨瀏覽器平台的重要特性，各大瀏覽器均可正常呈現特效。
2. 諾提供的jQuery檔案，語法部分均有詳細註解，如有需要可依使用需求自行修改。