创建 HTML 水平选项卡的优雅方法是什么？答案

【问题标题】：What is the elegant way to create HTML horizontal tabs?创建 HTML 水平选项卡的优雅方法是什么？
【发布时间】：2011-09-23 13:34:27
【问题描述】：

我要制作一个 HTML 网页。我想知道创建 HTML 水平标签（作为导航栏）最优雅的方法是什么？

我希望选中的标签和未选中的标签有不同的颜色。

我想我应该使用 CSS 进行样式设置，也许使用 jQuery 在不同的选项卡下显示和隐藏不同的内容？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

使用 jQuery UI 选项卡模块。

http://jqueryui.com/demos/tabs/

【讨论】：

【解决方案2】：

http://alistapart.com 上有一篇关于CSS »sliding doors« technique 如何向网站添加选项卡式导航的精彩文章。它是纯 HTML，但我相信您可以将它与 javascript 结合使用。

【讨论】：

【解决方案3】：

典型的最佳做法是为选项卡和菜单使用<li> 元素（使用<ul> 作为选项卡组的容器），并相应地设置它们的样式。

样式的关键位是：

float:left;  --or--  display:inline-block;
list-style:none;

float:left; 和display:inline-block; 都实现了相似的效果，因为它们使列表项显示在水平行中。它们以完全不同的方式实现它，这可能会对您造型的其他方面产生影响，但可以使用任何一种，这取决于您更喜欢哪种方式。（唯一需要注意的是，如果您需要支持 IE6，在这种情况下 inline-block 不起作用，但有解决方法）

list-style:none; 告诉列表项不要显示它们通常会给出的项目符号。

除了这两种样式之外，您几乎可以使用任何您喜欢的 CSS 来让它们看起来完全符合您的要求。通常选项卡的三个边都有边框、圆角、突出显示活动选项卡，如果您将鼠标悬停在它们上面...所有这些效果都可以通过 CSS 实现。

This article 很好地介绍了如何实现所有这些效果等等。网络上还有许多其他不错的教程。

希望对您有所帮助。

【讨论】：

【解决方案4】：

参考这个网址，它可以帮助你：- 2 level tabs 和 css horizontal tabs

【讨论】：