一、選項卡切換的原理

在
布局好選項卡的HTML結構后，我們可以看的出來，選項卡實際上是三個選項卡標頭和三個對應的版塊，如下圖，是三個標頭分別是教育，娛樂，汽車，當我們單
擊教育時，教育那個選項卡標頭的背景會變成激活狀白色，下面的的三個DIV形成的版塊只會顯示第一個教育的內容。當我們單擊娛樂時，娛樂那個選項卡標頭的
背景會變成激活狀白色，下面的的三個DIV形成的版塊只會顯示第二個娛樂的內容。當我們單擊汽車時，汽車那個選項卡標頭的背景會變成激活狀白色，下面的的
三個DIV形成的版塊只會顯示第三個汽車的內容。

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

二、制作過程

制作HTML結構框架

完成對應CSS的輸入，使頁面形成特定布局

輸寫javascript代碼，對選項卡標頭分別注冊相應的事件