一、選項(xiàng)卡切換的原理

在
布局好選項(xiàng)卡的HTML結(jié)構(gòu)后，我們可以看的出來(lái)，選項(xiàng)卡實(shí)際上是三個(gè)選項(xiàng)卡標(biāo)頭和三個(gè)對(duì)應(yīng)的版塊，如下圖，是三個(gè)標(biāo)頭分別是教育，娛樂(lè)，汽車(chē)，當(dāng)我們單
擊教育時(shí)，教育那個(gè)選項(xiàng)卡標(biāo)頭的背景會(huì)變成激活狀白色，下面的的三個(gè)DIV形成的版塊只會(huì)顯示第一個(gè)教育的內(nèi)容。當(dāng)我們單擊娛樂(lè)時(shí)，娛樂(lè)那個(gè)選項(xiàng)卡標(biāo)頭的
背景會(huì)變成激活狀白色，下面的的三個(gè)DIV形成的版塊只會(huì)顯示第二個(gè)娛樂(lè)的內(nèi)容。當(dāng)我們單擊汽車(chē)時(shí)，汽車(chē)那個(gè)選項(xiàng)卡標(biāo)頭的背景會(huì)變成激活狀白色，下面的的
三個(gè)DIV形成的版塊只會(huì)顯示第三個(gè)汽車(chē)的內(nèi)容。

具
體的實(shí)現(xiàn)是通過(guò)getElementsByTagName方法，先對(duì)選項(xiàng)卡三個(gè)標(biāo)頭H3進(jìn)行捕獲，產(chǎn)生一個(gè)數(shù)組，我們利用for循環(huán)分別對(duì)每個(gè)標(biāo)頭選項(xiàng)
H3添加一個(gè)index屬性作為它的序號(hào)同時(shí)注冊(cè)單擊事件，當(dāng)某個(gè)H3被單擊時(shí)，我們先把所有的H3都變成原始狀態(tài)，沒(méi)active類(lèi)，然后再把被單擊的
H3要添加一個(gè)active類(lèi)使其變成白色，此時(shí)，我們還要知道被單擊H3的序號(hào)，這樣我們可以去，設(shè)定與之序號(hào)相同的DIV顯示出來(lái)，而其它的DIV剛
隱藏起來(lái)。

二、制作過(guò)程

制作HTML結(jié)構(gòu)框架

完成對(duì)應(yīng)CSS的輸入，使頁(yè)面形成特定布局

輸寫(xiě)javascript代碼，對(duì)選項(xiàng)卡標(biāo)頭分別注冊(cè)相應(yīng)的事件