CSS實例：Unobtrusive頁簽切換符合Web標準具有html語義_DIV+CSS實例

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


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


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


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

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


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

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

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

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

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

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

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


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