我們的設計越來越追求一種簡潔的風格，希望在有限的空間內展示更多的內容。與此同時我們發現一些問題，內容的簡單排列總使頁面很長。滾屏很多才能將顯示的內容布局完畢。YAHOO與網易率先應用了標簽切換的布局方式，打破了常規布局的局限性，在相同尺寸的區域內，可以放置更多的內容。我們只需要點擊不同的選項卡或鏈接就能展開內容，這並不需要打開新的網頁，只是在同一頁內完成。
一、標簽切換總體的實現思路：
實現這種標簽切換的布局有多種方式，也流傳著各種不同的代碼，我們應用DIV CSS進行布局，首先來整理一下思路，如何實現這樣的標簽切換效果：
1、首先要放置標簽切換的容器，可以是選項卡形式，也可以是鏈接的形式；
2、放置具體的內容，並默認顯示其中的一個為顯示狀態。其它的內容則進行隱藏；
3、當用戶點擊選項卡或鏈接時，應用Javascript切換到指定的層進行顯示，而其它的內容層進行隱藏；
4、進行後期深入，例如，去除鏈接虛線與內容層圖文的美化等。
二、根據上面的思路我們開始整理Html代碼。我們作了如下規劃：
示例代碼 [www.mb5u.com]
<div class="woaiCSS">
<ul class="woaicss_title woaicss_title_bg1" id="woaiCSStitle">
</ul>
<div class="woaicss_con" id="woaiCSS_con1" style="display:block;">
</div>
<div class="woaicss_con" id="woaiCSS_con2" style="display:none;">
</div>
<div class="woaicss_con" id="woaiCSS_con3" style="display:none;">
</div>
<div class="woaicss_con" id="woaiCSS_con4" style="display:none;">
</div>
</div>
1、我們布置一個總體的容器，並應用類woaiCSS。
2、設置一個無序列表UL作為選項卡或鏈接的容器（下面具體介紹）。
3、我們分別設置了四個層，作為內容層（我們假想有四個切換）。請非凡注重這四個層均應用了類woaiCSS_con。與此同時為他們分別指定了不同的id。這是為了讓Javascript可以進行控制。我們設置第一個層的樣式為塊元素，即顯示出該內容層。而其它三層均進行了隱藏。
三、我們開始進一步完善Html代碼。無序列表UL增加一些鏈接：
示例代碼 [www.mb5u.com]
<ul class="woaicss_title woaicss_title_bg1" id="woaiCSStitle">
<li><a href="Javascript:void(0)" onclick="Javascript:woaiCSSq(1)">MB5U.com</a></li>
<li><a href="Javascript:void(0)" onclick="Javascript:woaicssq(2)">Div CSS教程</a></li>
<li><a href="Javascript:void(0)" onclick="Javascript:woaicssq(3)">CSS布局實例</a></li>
<li><a href="Javascript:void(0)" onclick="Javascript:woaiCSSq(4)">WEB標准化</a></li>
</ul>
1、我們為無序列表UL應用了兩個類woaicss_title、woaicss_title_bg1，第一個類可以對UL及LI、鏈接進行整體的外觀控制。以實現整體美化效果。我們也為無序列表UL指定了一個id為woaiCSStitle，目的在於可以應用Javascript進行樣式控制。
2、我們增加了四個鏈接，並對鏈接目標指定為：Javascript:void(0)。我們應該了解，當鏈接為“#”時，浏覽器會回到頁面頂部。而此處我們並不希望看到這樣的結果，因為在很多情況下，我們的切換框並不一定是在網頁的第一屏，假如點擊鏈接回到頂部，訪客就不會立即看到內容層所出現的變化。失去了制作標簽切換效果的意義。
3、我們為鏈接設置了onclick動作avascript:woaiCSSq(x)。我們在這裡向Javascript傳遞參數，以執行不同的腳本，實現切換的效果。
四、開始進行Javascript腳本的編寫：
示例代碼 [www.mb5u.com]
function woaiCSSq(num){
for(var id = 1;id<=4;id )
{
var MrJin="woaiCSS_con" id;
if(id==num)
document.getElementById(MrJin).style.display="block";
else
document.getElementById(MrJin).style.display="none";
}
if(num==1)
document.getElementById("woaicsstitle").className="woaicss_title woaiCSS_title_bg1";
if(num==2)
document.getElementById("woaicsstitle").className="woaicss_title woaiCSS_title_bg2";
if(num==3)
document.getElementById("woaicsstitle").className="woaicss_title woaiCSS_title_bg3";
if(num==4)
document.getElementById("woaicsstitle").className="woaicss_title woaiCSS_title_bg4";
}
Javascript腳本工作原理作簡要的說明：
（由於本站MB5U.com僅針對CSS進行討論，這裡對此腳本不作具體分析）
1、設置函數woaiCSSq，並從標簽切換的鏈接中獲取參數，如：Javascript:woaiCSSq(2)
2、聲明變量id為數值為1並小於等於4。這是我們四個內容層的數值。
3、聲明變量MrJin為"woaicss_con" id; （請注重我們在第一步驟所設置內容層的id，如：id="woaiCSS_con2"。）當id為所指定的數值時，則該層的屬性為display="block";。否則層的屬性為display="none"。即實現了內容層顯示與隱藏的切換功能。
4、當變量id為1-4其中的某一個數值是，對id為woaicsstitle的容器進行樣式定義，如：woaicss_title woaiCSS_title_bg3。這樣我們就可以通過不同的class類，對切換鏈接進行不同的樣式定義，當某一層顯示的時候，我們可以對該層所對應的鏈接作出一些指示。如選項卡的突出狀態等。
五、開始CSS的編寫：
示例代碼 [www.mb5u.com]
* {
list-style-type:none;
font-size:12px;
text-decoration:none;
margin:0;
padding:0;
}
總體布局聲明，去除列表項預設標記，設置文字大小為12px，去除文字裝飾線，外邊距與內邊距均為零。
示例代碼 [www.mb5u.com]
.woaiCSS {
width:438px;
height:300px;
overflow:hidden;
margin:50px auto;
}
總體標簽切換窗口的樣式定義，寬高設置，溢出為隱藏，上下外邊距為50px，左右為自動，實現水平居中對齊。
示例代碼 [www.mb5u.com]
.woaiCSS_title {
width:438px;
height:30px;
background:#fff url(btn_bg.png) no-repeat; overflow:hidden;
}
無序列表UL的樣式，寬高設置，背景圖片為btn_bg.png。
示例代碼 [www.mb5u.com]
.woaiCSS_title li {
display:block;
float:left;
margin:0 2px 0 0;
display:inline;
text-align:center;
}
無序列表內列表項的樣式，設置為塊元素並應用向左的浮動，右側外邊距為2px。將列表項內聯，文字對齊方式為居中。
示例代碼 [www.mb5u.com]
.woaiCSS_title li a {
display:block;
width:90px;
heigth:30px;
line-height:34px;
color:#fff;
}
列表項鏈接的樣式，設置為塊元素並指定了寬高，行高為34px，顏色為白色color:#fff；
示例代碼 [www.mb5u.com]
.woaiCSS_title li a:hover {
color:#f0f0f0;
text-decoration:underline;
}
列表項鏈接的懸停樣式，顏色為#f0f0f0，加下劃線作為裝飾線。
示例代碼 [www.mb5u.com]
.woaiCSS_title_bg1 {background-position:0 0;}
.woaiCSS_title_bg2 {background-position:0 -30px;}
.woaiCSS_title_bg3 {background-position:0 -60px;}
.woaiCSS_title_bg4 {background-position:0 -90px;}
此四個樣式的定義請與步驟四Javascript腳本進行聯系。即在函數的值變化時，相應的對無序列表的樣式進行重新定義，我們在此處對背景圖定位進行了調整，實現了選項卡片的突出狀態。
示例代碼 [www.mb5u.com]
.woaiCSS_con {
display:block;
width:438px;
height:270px;
background:url(con_bg.png) no-repeat 0 0; overflow:hidden;
}
內容層的樣式定義，指定寬高，並設置背景圖片con_bg.png。MB5U.com請您非凡注重，這裡的背景圖片與無序列表UL的背景圖片應該是無縫結合。即從外觀上它們兩者是一個整體。
六、內容充實： 我們為內容層填充一定的內容，並對其進行美化，例如：（僅說明其一，其它三個雷同。）
示例代碼 [www.mb5u.com]
<ul>
<li><a href="#" title="">Web Developer插件教程 CSS網頁布局輔助設計利器！具體圖文講解！</a></li>
<li><a href="#" title="">CSS Templates 頻道4月5日更新 增加模板22套</a></li>
<li><a href="#" title="">XHtml與CSS入門經典 從零開始系列教程！</a></li>
<li><a href="#" title="">DIV CSS布局入門示例（目錄）</a></li>
<li><a href="#" title="">CSS基礎教程17篇 [翻譯Htmldog]</a></li>
<li><a href="#" title="">DIV CSS布局實例：用CSS網站布局之十步實錄！（目錄） </a></li>
<li><a href="#" title="">WEB2.0標准教程 循序漸進十二天的基礎學習！</a></li>
<li><a href="#" title="">Div CSS 網頁布局 教程！</a></li>
</ul>
我們充實的內容層為一個UL無序列表，我們對其進行樣式定義：
示例代碼 [www.mb5u.com]
.woaiCSS_con ul {
width:418px;
height:250px;
margin:12px auto;
}
.woaiCSS_con li {
width:418px;
line-height:30px;
margin:0 auto;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
.woaiCSS_con li a {
color:#03c;
}
.woaiCSS_con li a:hover {
color:#069;
text-decoration:underline;
}
此處不是本文重點，所以不再贅述。
七：細節修飾 我們這裡的鏈接並未起到真正的URL轉向的作用，僅是一個標簽，所以我們可以將其虛線框去除，以讓我們的頁面更加的工整與自然。將下面的代碼另存為xuxian.htc文件：
示例代碼 [www.mb5u.com]
<public:attach event="onfocus" onevent="hscfsy()"/>
<script language="Javascript">
function hscfsy(){
this.blur();
}
</script>
我們在CSS樣式中添加這一句代碼：a {behavior:url(xuxian.htc)}
這樣就可以去除了鏈接虛線框（請注重 在FF中此效果無效）。
八：最終效果及舉一反三： 在我們的實現工作中可能會碰到另外一種情況：
我們需要實現當鼠標劃過時進行切換，當鼠標點擊時打開相應內容的鏈接。
我們將無序列表UL作如下修改即可實現：
示例代碼 [www.mb5u.com]
<ul class="woaicss_title woaicss_title_bg1" id="woaiCSStitle">
<li><a href="#" onmouSEOver="Javascript:woaiCSSq(1)">MB5U.com</a></li>
<li><a href="#" onmouSEOver="Javascript:woaicssq(2)">Div CSS教程</a></li>
<li><a href="#" onmouSEOver="Javascript:woaicssq(3)">CSS布局實例</a></li>
<li><a href="#" onmouSEOver="Javascript:woaiCSSq(4)">WEB標准化</a></li>
</ul>