在前面制作滑動(dòng)輪播圖的經(jīng)驗(yàn)基礎(chǔ)上，我們?cè)賮碜鲆粋€(gè)選項(xiàng)卡切換的效果非常容易。通過鼠標(biāo)放置在選項(xiàng)上來切換對(duì)應(yīng)的圖片，并且選項(xiàng)卡的背景色跟隨鼠標(biāo)移動(dòng)而變化。 HTML基本代碼 首先，我們需要編寫HTML

在前面制作滑動(dòng)輪播圖的經(jīng)驗(yàn)基礎(chǔ)上，我們?cè)賮碜鲆粋€(gè)選項(xiàng)卡切換的效果非常容易。通過鼠標(biāo)放置在選項(xiàng)上來切換對(duì)應(yīng)的圖片，并且選項(xiàng)卡的背景色跟隨鼠標(biāo)移動(dòng)而變化。

HTML基本代碼

首先，我們需要編寫HTML代碼，其中包含四個(gè)選項(xiàng)和四張圖片。當(dāng)鼠標(biāo)放置在某個(gè)選項(xiàng)上時(shí)，下方將顯示對(duì)應(yīng)的圖片。默認(rèn)情況下，第一個(gè)選項(xiàng)和第一張圖片都被設(shè)置為選中狀態(tài)，分別添加了active和show屬性。

布局顯示

接下來，我們需要通過CSS進(jìn)行布局和樣式的設(shè)置。最外層的div用于定義圖片顯示區(qū)域，而ul分別指向了選項(xiàng)列表和圖片列表。為了讓圖片在同一位置顯示，我們使用絕對(duì)定位，并默認(rèn)隱藏了其他幾張圖片。

這里需要注意的是設(shè)置了box-sizing: border-box;屬性，所以在計(jì)算容器寬高時(shí)要把邊距也計(jì)算在內(nèi)，否則可能會(huì)出現(xiàn)錯(cuò)誤。這種方式適用于百分比寬度的情況。頁(yè)面載入后的效果如下：

交互效果

第三步是實(shí)現(xiàn)交互效果。我們使用JavaScript獲取需要進(jìn)行交互的元素，并遍歷選項(xiàng)列表。當(dāng)鼠標(biāo)放置在對(duì)應(yīng)的選項(xiàng)上時(shí)，將移除其他選項(xiàng)的active樣式，并隱藏其他圖片，只顯示當(dāng)前選中的圖片。

通過這樣的操作，我們就可以實(shí)現(xiàn)上述效果。這個(gè)思路不僅適用于圖片切換，還可以將任何想要顯示的內(nèi)容放入content中。以下是完整的代碼，有興趣的可以嘗試一下：