題目：
選項卡製作，網頁載入後選項卡效果圖如圖1，當滑鼠指標指向某個選項卡時效果圖如圖1、圖2、圖3所示。
圖1
圖2
圖3
解析：
基礎頁面寫好後，透過監聽選項卡的 mouseover 事件，動態改變選項卡的樣式和圖片的樣式。
具體步驟：
基礎HTML和CSS程式碼：
HTML程式碼如下
- Tab1
- Tab2
- Tab3
CSS程式碼如下
。tab ul， 。tab ol { list-style：none； margin：0； padding：0；}。tab ul { height：26px； width：500px；}。tab ol { height：auto； width：500px； padding：6px； background：#1B8DD6；}。tab ul li { float：left； height：24px； padding：0 1em； cursor：pointer；}。normal { color：#1f3a87； background：#fff； border：2px solid #1B8DD6； border-bottom：0；}。hover { color：#fff； font-weight：bold； background：#1B8DD6； border：2px solid #1B8DD6； border-bottom：0；}。show { display：block； }。none { display：none； }
JS程式碼
JavaScript程式碼和註釋如下所示。基本思路是，先設定所有元素的樣式，再設定選中的元素的樣式。
// 獲取ul 和 ol元素var $uli = $（“。tab ul li”）；var $oli = $（“。tab ol li”）；// 這兩句，將第一個ul元素樣式改為hover，將其他元素樣式改為normal$uli。addClass（“normal”）；$uli［0］。className = “hover”；// 這兩句話，顯示第一張圖片，隱藏其他圖片$oli。addClass（“none”）；$oli［0］。className = “show”；// 使用jQuery的each（）方法進行遍歷，引數是個回撥函式，// 回撥函式設定一個形參，就是選中元素的索引$uli。each（function（i）{、 // 監聽 mouseover事件 $（this）。mouseover（function（）{ // 將選中的標籤樣式改為hover， 其他事normal $uli。removeClass（）。addClass（“normal”）； $（this）。removeClass（）。addClass（“hover”）； // 顯示對應的圖片 $oli。removeClass（）。addClass（“none”）； $（$oli［i］）。removeClass（）。addClass（“show”）； }） }）
完工。
