什么是创建HTML水平制表符的优雅方式？

Question

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

我想选择标签和未选择标签有不同的颜色。

我想我应该使用CSS的样式，也许jQuery显示和隐藏不同的标签下的不同内容？

Answer 1

使用jQuery UI选项卡模块。

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

Answer 2

请参阅此网址的，它可以帮助你： - 2 level tabs和 css horizontal tabs

Answer 3

有上http://alistapart.com一个精彩的文章关于CSS »sliding doors« technique如何分页导航添加到网站。这是纯HTML，但我相信你可以将它与JavaScript结合起来。

Answer 4

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

造型的关键位是：

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

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

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

除了这两种风格之外，您几乎可以使用任何您喜欢的CSS来让它们看起来完全如您所想。通常，选项卡的边界三边，圆角，突出显示活动选项卡，如果你把它们悬停在他们......所有这些效果可以用CSS来实现。

This article给出了如何实现所有这些效果以及更多的好习惯。网上还有很多其他优秀的教程。

希望有所帮助。