我們的設(shè)計越來越追求一種簡潔的風(fēng)格，希望在有限的空間內(nèi)展示更多的內(nèi)容。與此同時我們發(fā)現(xiàn)一些問題，內(nèi)容的簡單排列總使頁面很長。滾屏很多才能將顯示的內(nèi)容布局完畢。YAHOO與網(wǎng)易率先應(yīng)用了標(biāo)簽切換的布局方式，打破了常規(guī)布局的局限性，在相同尺寸的區(qū)域內(nèi)，可以放置更多的內(nèi)容。我們只需要點擊不同的選項卡或鏈接就能展開內(nèi)容，這并不需要打開新的網(wǎng)頁，只是在同一頁內(nèi)完成。

一、標(biāo)簽切換總體的實現(xiàn)思路：

　　實現(xiàn)這種標(biāo)簽切換的布局有多種方式，也流傳著各種不同的代碼，我們應(yīng)用DIV CSS進(jìn)行布局，首先來整理一下思路，如何實現(xiàn)這樣的標(biāo)簽切換效果：
　　1、首先要放置標(biāo)簽切換的容器，可以是選項卡形式，也可以是鏈接的形式；
　　2、放置具體的內(nèi)容，并默認(rèn)顯示其中的一個為顯示狀態(tài)。其它的內(nèi)容則進(jìn)行隱藏；
　　3、當(dāng)用戶點擊選項卡或鏈接時，應(yīng)用javascript切換到指定的層進(jìn)行顯示，而其它的內(nèi)容層進(jìn)行隱藏；
　　4、進(jìn)行后期深入，例如，去除鏈接虛線與內(nèi)容層圖文的美化等。

　　我們看最終本實例的效果圖片：


　　本實例所用到的兩張背景圖片如下：



二、根據(jù)上面的思路我們開始整理HTML代碼。我們作了如下規(guī)劃：


　　1、我們布置一個總體的容器，并應(yīng)用類woaicss。
　　2、設(shè)置一個無序列表UL作為選項卡或鏈接的容器（下面具體介紹）。
　　3、我們分別設(shè)置了四個層，作為內(nèi)容層（我們假想有四個切換）。請非凡注重這四個層均應(yīng)用了類woaicss_con。與此同時為他們分別指定了不同的id。這是為了讓javascript可以進(jìn)行控制。我們設(shè)置第一個層的樣式為塊元素，即顯示出該內(nèi)容層。而其它三層均進(jìn)行了隱藏。

三、我們開始進(jìn)一步完善HTML代碼。無序列表UL增加一些鏈接：


　　1、我們?yōu)闊o序列表UL應(yīng)用了兩個類woaicss_title、woaicss_title_bg1，第一個類可以對UL及LI、鏈接進(jìn)行整體的外觀控制。以實現(xiàn)整體美化效果。我們也為無序列表UL指定了一個id為woaicsstitle，目的在于可以應(yīng)用javascript進(jìn)行樣式控制。
　　2、我們增加了四個鏈接，并對鏈接目標(biāo)指定為：javascript:void(0)。我們應(yīng)該了解，當(dāng)鏈接為“#”時，瀏覽器會回到頁面頂部。而此處我們并不希望看到這樣的結(jié)果，因為在很多情況下，我們的切換框并不一定是在網(wǎng)頁的第一屏，假如點擊鏈接回到頂部，訪客就不會立即看到內(nèi)容層所出現(xiàn)的變化。失去了制作標(biāo)簽切換效果的意義。
　　3、我們?yōu)殒溄釉O(shè)置了onclick動作avascript:woaicssq(x)。我們在這里向javascript傳遞參數(shù)，以執(zhí)行不同的腳本，實現(xiàn)切換的效果。

四、開始進(jìn)行javascript腳本的編寫：


　　javascript腳本工作原理作簡要的說明：
　　（由于本站MB5U.com僅針對CSS進(jìn)行討論，這里對此腳本不作具體分析）
　　1、設(shè)置函數(shù)woaicssq，并從標(biāo)簽切換的鏈接中獲取參數(shù)，如：javascript:woaicssq(2)
　　2、聲明變量id為數(shù)值為1并小于等于4。這是我們四個內(nèi)容層的數(shù)值。
　　3、聲明變量MrJin為"woaicss_con" id; （請注重我們在第一步驟所設(shè)置內(nèi)容層的id，如：id="woaicss_con2"。）當(dāng)id為所指定的數(shù)值時，則該層的屬性為display="block";。否則層的屬性為display="none"。即實現(xiàn)了內(nèi)容層顯示與隱藏的切換功能。
　　4、當(dāng)變量id為1-4其中的某一個數(shù)值是，對id為woaicsstitle的容器進(jìn)行樣式定義，如：woaicss_title woaicss_title_bg3。這樣我們就可以通過不同的class類，對切換鏈接進(jìn)行不同的樣式定義，當(dāng)某一層顯示的時候，我們可以對該層所對應(yīng)的鏈接作出一些指示。如選項卡的突出狀態(tài)等。

五、開始CSS的編寫：


　　總體布局聲明，去除列表項預(yù)設(shè)標(biāo)記，設(shè)置文字大小為12px，去除文字裝飾線，外邊距與內(nèi)邊距均為零。


　　總體標(biāo)簽切換窗口的樣式定義，寬高設(shè)置，溢出為隱藏，上下外邊距為50px，左右為自動，實現(xiàn)水平居中對齊。


　　無序列表UL的樣式，寬高設(shè)置，背景圖片為btn_bg.png。


　　無序列表內(nèi)列表項的樣式，設(shè)置為塊元素并應(yīng)用向左的浮動，右側(cè)外邊距為2px。將列表項內(nèi)聯(lián)，文字對齊方式為居中。


　　列表項鏈接的樣式，設(shè)置為塊元素并指定了寬高，行高為34px，顏色為白色color:#fff；


　　列表項鏈接的懸停樣式，顏色為#f0f0f0，加下劃線作為裝飾線。


　　此四個樣式的定義請與步驟四javascript腳本進(jìn)行聯(lián)系。即在函數(shù)的值變化時，相應(yīng)的對無序列表的樣式進(jìn)行重新定義，我們在此處對背景圖定位進(jìn)行了調(diào)整，實現(xiàn)了選項卡片的突出狀態(tài)。


　　內(nèi)容層的樣式定義，指定寬高，并設(shè)置背景圖片con_bg.png。MB5U.com請您非凡注重，這里的背景圖片與無序列表UL的背景圖片應(yīng)該是無縫結(jié)合。即從外觀上它們兩者是一個整體。

六、內(nèi)容充實：

　　我們?yōu)閮?nèi)容層填充一定的內(nèi)容，并對其進(jìn)行美化，例如：（僅說明其一，其它三個雷同。）


　　我們充實的內(nèi)容層為一個UL無序列表，我們對其進(jìn)行樣式定義：


　　此處不是本文重點，所以不再贅述。
七：細(xì)節(jié)修飾

　　我們這里的鏈接并未起到真正的URL轉(zhuǎn)向的作用，僅是一個標(biāo)簽，所以我們可以將其虛線框去除，以讓我們的頁面更加的工整與自然。將下面的代碼另存為xuxian.htc文件：


　　我們在CSS樣式中添加這一句代碼：a {behavior:url(xuxian.htc)}
　　這樣就可以去除了鏈接虛線框（請注重 在FF中此效果無效）。

八：最終效果及舉一反三：

　　
　　在我們的實現(xiàn)工作中可能會碰到另外一種情況：
　　我們需要實現(xiàn)當(dāng)鼠標(biāo)劃過時進(jìn)行切換，當(dāng)鼠標(biāo)點擊時打開相應(yīng)內(nèi)容的鏈接。
　　我們將無序列表UL作如下修改即可實現(xiàn)：