頁簽的流行
　　自從Yahoo!的首頁引進頁簽（tab, 見下圖）之后，這種可用性極佳的方式越來越受歡迎，用戶也逐步習慣和喜歡上它，因為它可以在原有的空間上增加更多的可用信息，而且只需切換，不需刷新整個頁面，瀏覽更愉快。很多網(wǎng)站接受并使用，如新浪等。


頁簽的標記結構
　　那么，讓我們來看看這些頁簽后的代碼。
　　新浪完全不考慮什么標準，就是表格嵌套，我們略過不提。Yahoo!的XHTML形式是這樣的：


　　符合標準，但卻沒有語義。頁簽和相應內(nèi)容沒有任何關聯(lián)。也就是說，在沒有CSS展現(xiàn)的情況下，用戶并不曉得頁簽究竟對應哪一塊內(nèi)容。而且就JavaScript實現(xiàn)來說，必須對元素定義更多的id或者class作為調用鉤子（hook），輕易造成代碼冗余。有人對此作出改良，使用連接元素的hash（即#號后的字段）跟內(nèi)容進行關聯(lián)，即下面這種形式：


　　這種方式對于機器來說，確實找到了關聯(lián)點，而且用戶點擊的時候，也能在hash的作用下（傳統(tǒng)說法中的“錨點”）調到相應的內(nèi)容區(qū)塊。有進步，但還是不夠語義。

語義，語義，語義！
　　理想中標準的、語義的tab代碼應該是怎么樣的呢？在我看來，應該是這樣：


　　當然，我認為并不是Yahoo!的設計師／開發(fā)者并不了解語義，可能是由于某些非凡的需求在這種代碼下可能會實現(xiàn)不了，只好采取折衷方案。是的，在這種代碼形式下，語義雖能充分體現(xiàn)，但是要實現(xiàn)頁簽的表現(xiàn)形式，確實是一個難題。

解決之道
　　首先，請打開我們的Demo頁面，先自行分析一下。假如您使用Firefox，可以嘗試把CSS樣式禁用進行“欣賞”（假如您裝了Web developer toolbar，您可以CTRL SHIFT S）。繼續(xù)。

解決dt的橫排
　　dt與dd交錯，如何能夠使得dt排在一行上？well，理論不分析太多，要使它們在一起，我們假設dd不存在。這樣的話，使用float就能排在一起。既然dd不能不存在，ok，那么讓它們脫離文檔流，如何做？
　　position:absolute;就可以了。但是IE6有問題，wtf . 我的解決方法是，使用JavaScript把所有的dt湊一塊，這樣嚴重傷害了語義，但這只是一個瀏覽器問題，而且是在有JavaScript的時候才產(chǎn)生語義問題，阿彌陀佛，辯證法認為事物都具兩面性。

解決dd的自適用高度
　　對于已經(jīng)position:absolute;了的dd，無論是理論還是實踐，使用純CSS都沒有解決方法。同樣，我使用了JavaScript來動態(tài)計算它的每一次高度，然后賦予整個dl。

局限性與缺點
　　這樣做保證了標準、語義、Unobtrusive。但對于少部分擁有能解析CSS的先進瀏覽器但卻關閉了JavaScript的用戶來說，極有可能會被不能自適用高度的頁簽下的內(nèi)容區(qū)塊擋住了跟隨在后的信息。

s2uTab
　　很興奮我能寫出一些實用的JavaScript，以上所提到的，我將之命名為s2uTab — 偏要解釋的話，它就是Standard, Semantic, Unobtrusive Tab的縮寫。首先，它很小，不依靠于任何庫，在IE6 , opera 9 , Firefox 2 均通過測試（若您有Safari，務必幫忙測試一下，謝謝）。其次，靈活，除了dl外無須任何鉤子，且頁簽數(shù)目靈活沒有限制。再次，您可以指定頁簽切換的事件形式，可以指定初始的頁簽是哪個。

用法
　　您可以為window.onload添加如下函數(shù)：


　　其中，頁簽指dl元素的引用，假如您傳入的是字符串，則返回id是改字符串的dl引用；事件類型是指，頁簽的激活是點擊還是鼠標懸停，傳入click或者mouseover（注重：沒有”on”!）即可；初始頁簽是指您在初始化頁面時需要激活的頁簽，注重，為符合編程習慣，請從0算起。
　　請多多參考我們的例子。