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="http://cms.ddvip.com/index.php#content1">页签1</a></li>　
　　<li><a href="http://cms.ddvip.com/index.php#content2">页签2</a></li>　
　　...　
　</ul>　
</div>　
<div>　
　<div id="content1">内容1</div><!--它们可能由Ajax载入-->　
　<div id="content2">内容1</div>　
　...　
</div>　
...

　　这种方式对于机器来说，确实找到了关联点，而且用户点击的时候，也能在hash的作用下（传统说法中的“锚点”）调到相应的内容区块。有进步，但还是不够语义。

[1] [2] [3]  下一页

欢迎大家阅读《CSS:标准的 语义的 非侵入的页签切换》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)