您当前的位置: 首页 » DIV+CSS编程 » CSS:标准的 语义的 非侵入的页签切换
CSS:标准的 语义的 非侵入的页签切换
论坛链接
页签的流行
自从Yahoo!的首页引进页签（tab, 见下图）之后，这种可用性极佳的方式越来越受欢迎，用户也逐步习惯和喜欢上它，因为它可以在原有的空间上增加更多的可用信息，而且只需切换，不需刷新整个页面，浏览更舒畅。很多网站接受并使用，如新浪等。
页签的标记结构
那么，让我们来看看这些页签后的代码。
新浪完全不考虑什么标准，就是表格嵌套，我们略过不提。Yahoo!的XHTML形式是这样的：
<div>
<ul>
<li>页签1</li>
<li>页签2</li>
...
</ul>
</div>
<div>
<div>内容1</div><!--它们可能由Ajax载入-->
<div>内容1</div>
...
</div>
...
符合标准，但却没有语义。页签和相应内容没有任何关联。也就是说，在没有CSS展现的情况下，用户并不晓得页签究竟对应哪一块内容。而且就JavaScript实现来说，必须对元素定义更多的id或者class作为调用钩子（hook），容易造成代码冗余。有人对此作出改良，使用连接元素的hash（即#号后的字段）跟内容进行关联，即下面这种形式：
<div>
<ul>
<li><a href="#content1">页签1</a></li>
<li><a href="#content2">页签2</a></li>
...
</ul>
</div>
<div>
<div id="content1">内容1</div><!--它们可能由Ajax载入-->
<div id="content2">内容1</div>
...
</div>
...
这种方式对于机器来说，确实找到了关联点，而且用户点击的时候，也能在hash的作用下（传统说法中的“锚点”）调到相应的内容区块。有进步，但还是不够语义。
语义，语义，语义！
理想中标准的、语义的tab代码应该是怎么样的呢？在我看来，应该是这样：
<dl>
<dt>页签1</dt>
<dd>内容1</dd>
<dt>页签2</dd>
<dd>内容2</dd>
</dl>
当然，我认为并不是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添加如下函数：
s2uTab(页签, 事件类型, 初始页签);
其中，页签指dl元素的引用，如果您传入的是字符串，则返回id是改字符串的dl引用；事件类型是指，页签的激活是点击还是鼠标悬停，传入click或者mouseover（注意：没有”on”!）即可；初始页签是指您在初始化页面时需要激活的页签，注意，为符合编程习惯，请从0算起。
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="developer" content="Realazy" />
<title>标准的、语义的、Unobtrusive的页签切换</title>
<link rel="stylesheet" href="http://www.blueidea.com/articleimg/2007/04/4630/global.css" type="text/css" media="screen" title="default" />
<link rel="stylesheet" href="http://www.blueidea.com/articleimg/2007/04/4630/tab.css" type="text/css" media="screen" title="default" />
<script src="http://www.blueidea.com/articleimg/2007/04/4630/s2utab.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
window.onload = function(){
s2uTab('tab', 'click', 2);
s2uTab('tab2', 'mouseover', 0);
}
// ]]>
</script>
</head>
<body>
<h1>标准的、语义的、Unobtrusive的页签切换</h1>
<h2>例子1：点击激活</h2>
<pre><quote>s2uTab('tab', 'click', 2);</quote></pre>
<dl id="tab" class="tab">
<dt>灞上秋居</dt>
<dd>
<p>灞原风雨定，</p>
<p>晚见雁行频。</p>
<p>落叶他乡树，</p>
<p>寒灯独夜人。</p>
<p>空园白露滴，</p>
<p>孤壁野僧邻。</p>
<p>寄卧郊扉久，</p>
<p>何年致此身。</p>
</dd>
<dt>新嫁娘</dt>
<dd>
<p>三日入厨下，</p>
<p>洗手作羹汤。</p>
<p>未谙姑食性，</p>
<p>先遣小姑尝。</p>
</dd>
<dt>塞下曲·其二</dt>
<dd>
<p>饮马渡秋水，</p>
<p>水寒风似刀。</p>
<p>平沙日未没，</p>
<p>黯黯见临洮。</p>
<p>昔日长城战，</p>
<p>咸言意气高。</p>
<p>黄尘足今古，</p>
<p>白骨乱蓬蒿。</p>
</dd>
</dl>
<h2>例子2：鼠标悬停激活</h2>
<pre><quote>s2uTab('tab', 'mouseover', 0);</quote></pre>
<dl id="tab2" class="tab">
<dt>灞上秋居</dt>
<dd>
<p>灞原风雨定，</p>
<p>晚见雁行频。</p>
<p>落叶他乡树，</p>
<p>寒灯独夜人。</p>
<p>空园白露滴，</p>
<p>孤壁野僧邻。</p>
<p>寄卧郊扉久，</p>
<p>何年致此身。</p>
</dd>
<dt>新嫁娘</dt>
<dd>
<p>三日入厨下，</p>
<p>洗手作羹汤。</p>
<p>未谙姑食性，</p>
<p>先遣小姑尝。</p>
</dd>
<dt>塞下曲·其二</dt>
<dd>
<p>饮马渡秋水，</p>
<p>水寒风似刀。</p>
<p>平沙日未没，</p>
<p>黯黯见临洮。</p>
<p>昔日长城战，</p>
<p>咸言意气高。</p>
<p>黄尘足今古，</p>
<p>白骨乱蓬蒿。</p>
</dd>
</dl>
<h2>CSS</h2>
<pre><quote>.tab {position:relative; width:20em;}
.tab dt {position:relative; z-index:2; bottom:-1px; float:left; margin:0 4px; padding:0 12px; border:1px solid #ccc; background:#333; color:#fff; cursor:pointer;}
.tab .current {border-bottom:1px solid #fff; font-weight:bold; background:#fff; color:#333;}
.tab dd {position:absolute; z-index:1; top:1.6em; left:0; width:18em; padding:1em; border:1px solid #ccc; background:#fff;}</quote></pre>
<p class="copyleft">Copy<strong>left</strong> ? 2007 <a href="http://realazy.org/blog">Realazy</a></p>
</body>
</html>
自从Yahoo!的首页引进页签（tab, 见下图）之后，这种可用性极佳的方式越来越受欢迎，用户也逐步习惯和喜欢上它，因为它可以在原有的空间上增加更多的可用信息，而且只需切换，不需刷新整个页面，浏览更舒畅。很多网站接受并使用，如新浪等。
页签的标记结构
那么，让我们来看看这些页签后的代码。
新浪完全不考虑什么标准，就是表格嵌套，我们略过不提。Yahoo!的XHTML形式是这样的：
<div>
<ul>
<li>页签1</li>
<li>页签2</li>
...
</ul>
</div>
<div>
<div>内容1</div><!--它们可能由Ajax载入-->
<div>内容1</div>
...
</div>
...
符合标准，但却没有语义。页签和相应内容没有任何关联。也就是说，在没有CSS展现的情况下，用户并不晓得页签究竟对应哪一块内容。而且就JavaScript实现来说，必须对元素定义更多的id或者class作为调用钩子（hook），容易造成代码冗余。有人对此作出改良，使用连接元素的hash（即#号后的字段）跟内容进行关联，即下面这种形式：
<div>
<ul>
<li><a href="#content1">页签1</a></li>
<li><a href="#content2">页签2</a></li>
...
</ul>
</div>
<div>
<div id="content1">内容1</div><!--它们可能由Ajax载入-->
<div id="content2">内容1</div>
...
</div>
...
这种方式对于机器来说，确实找到了关联点，而且用户点击的时候，也能在hash的作用下（传统说法中的“锚点”）调到相应的内容区块。有进步，但还是不够语义。
语义，语义，语义！
理想中标准的、语义的tab代码应该是怎么样的呢？在我看来，应该是这样：
<dl>
<dt>页签1</dt>
<dd>内容1</dd>
<dt>页签2</dd>
<dd>内容2</dd>
</dl>
当然，我认为并不是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添加如下函数：
s2uTab(页签, 事件类型, 初始页签);
其中，页签指dl元素的引用，如果您传入的是字符串，则返回id是改字符串的dl引用；事件类型是指，页签的激活是点击还是鼠标悬停，传入click或者mouseover（注意：没有”on”!）即可；初始页签是指您在初始化页面时需要激活的页签，注意，为符合编程习惯，请从0算起。
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="developer" content="Realazy" />
<title>标准的、语义的、Unobtrusive的页签切换</title>
<link rel="stylesheet" href="http://www.blueidea.com/articleimg/2007/04/4630/global.css" type="text/css" media="screen" title="default" />
<link rel="stylesheet" href="http://www.blueidea.com/articleimg/2007/04/4630/tab.css" type="text/css" media="screen" title="default" />
<script src="http://www.blueidea.com/articleimg/2007/04/4630/s2utab.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
window.onload = function(){
s2uTab('tab', 'click', 2);
s2uTab('tab2', 'mouseover', 0);
}
// ]]>
</script>
</head>
<body>
<h1>标准的、语义的、Unobtrusive的页签切换</h1>
<h2>例子1：点击激活</h2>
<pre><quote>s2uTab('tab', 'click', 2);</quote></pre>
<dl id="tab" class="tab">
<dt>灞上秋居</dt>
<dd>
<p>灞原风雨定，</p>
<p>晚见雁行频。</p>
<p>落叶他乡树，</p>
<p>寒灯独夜人。</p>
<p>空园白露滴，</p>
<p>孤壁野僧邻。</p>
<p>寄卧郊扉久，</p>
<p>何年致此身。</p>
</dd>
<dt>新嫁娘</dt>
<dd>
<p>三日入厨下，</p>
<p>洗手作羹汤。</p>
<p>未谙姑食性，</p>
<p>先遣小姑尝。</p>
</dd>
<dt>塞下曲·其二</dt>
<dd>
<p>饮马渡秋水，</p>
<p>水寒风似刀。</p>
<p>平沙日未没，</p>
<p>黯黯见临洮。</p>
<p>昔日长城战，</p>
<p>咸言意气高。</p>
<p>黄尘足今古，</p>
<p>白骨乱蓬蒿。</p>
</dd>
</dl>
<h2>例子2：鼠标悬停激活</h2>
<pre><quote>s2uTab('tab', 'mouseover', 0);</quote></pre>
<dl id="tab2" class="tab">
<dt>灞上秋居</dt>
<dd>
<p>灞原风雨定，</p>
<p>晚见雁行频。</p>
<p>落叶他乡树，</p>
<p>寒灯独夜人。</p>
<p>空园白露滴，</p>
<p>孤壁野僧邻。</p>
<p>寄卧郊扉久，</p>
<p>何年致此身。</p>
</dd>
<dt>新嫁娘</dt>
<dd>
<p>三日入厨下，</p>
<p>洗手作羹汤。</p>
<p>未谙姑食性，</p>
<p>先遣小姑尝。</p>
</dd>
<dt>塞下曲·其二</dt>
<dd>
<p>饮马渡秋水，</p>
<p>水寒风似刀。</p>
<p>平沙日未没，</p>
<p>黯黯见临洮。</p>
<p>昔日长城战，</p>
<p>咸言意气高。</p>
<p>黄尘足今古，</p>
<p>白骨乱蓬蒿。</p>
</dd>
</dl>
<h2>CSS</h2>
<pre><quote>.tab {position:relative; width:20em;}
.tab dt {position:relative; z-index:2; bottom:-1px; float:left; margin:0 4px; padding:0 12px; border:1px solid #ccc; background:#333; color:#fff; cursor:pointer;}
.tab .current {border-bottom:1px solid #fff; font-weight:bold; background:#fff; color:#333;}
.tab dd {position:absolute; z-index:1; top:1.6em; left:0; width:18em; padding:1em; border:1px solid #ccc; background:#fff;}</quote></pre>
<p class="copyleft">Copy<strong>left</strong> ? 2007 <a href="http://realazy.org/blog">Realazy</a></p>
</body>
</html>