CSS實(shí)例：Unobtrusive頁(yè)簽切換符合Web標(biāo)準(zhǔn)具有html語(yǔ)義_DIV+CSS實(shí)例

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

頁(yè)簽的流行
　　自從Yahoo!的首頁(yè)引進(jìn)頁(yè)簽（tab, 見(jiàn)下圖）之后，這種可用性極佳的方式越來(lái)越受歡迎，用戶(hù)也逐步習(xí)慣和喜歡上它，因?yàn)樗梢栽谠械目臻g上增加更多的可用信息，而且只需切換，不需刷新整個(gè)頁(yè)面，瀏覽更愉快。很多網(wǎng)站接受并使用，如新浪等。

頁(yè)簽的標(biāo)記結(jié)構(gòu)
　　那么，讓我們來(lái)看看這些頁(yè)簽后的代碼。
　　新浪完全不考慮什么標(biāo)準(zhǔn)，就是表格嵌套，我們略過(guò)不提。Yahoo!的XHTML形式是這樣的：

示例代碼 [hl5o.cn]

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

示例代碼 [hl5o.cn]

　　這種方式對(duì)于機(jī)器來(lái)說(shuō)，確實(shí)找到了關(guān)聯(lián)點(diǎn)，而且用戶(hù)點(diǎn)擊的時(shí)候，也能在hash的作用下（傳統(tǒng)說(shuō)法中的“錨點(diǎn)”）調(diào)到相應(yīng)的內(nèi)容區(qū)塊。有進(jìn)步，但還是不夠語(yǔ)義。

語(yǔ)義，語(yǔ)義，語(yǔ)義！
　　理想中標(biāo)準(zhǔn)的、語(yǔ)義的tab代碼應(yīng)該是怎么樣的呢？在我看來(lái)，應(yīng)該是這樣：

示例代碼 [hl5o.cn]

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

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

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

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

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

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

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

示例代碼 [hl5o.cn]

s2uTab(頁(yè)簽, 事件類(lèi)型, 初始頁(yè)簽);

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