解决之道

首先，请打开我们的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外无须任何钩子，且页签数目灵活没有限制。再次，您可以指定页签切换的事件形式，可以指定初始的页签是哪个。

出处：Realazy
责任编辑：moby

上一页 标准的 语义的 非侵入的页签切换 [1] 下一页 标准的 语义的 非侵入的页签切换 [3]

◎进入论坛网页制作、网站综合版块参加讨论