什麼是創建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給出瞭如何實現所有這些效果以及更多的好習慣。網上還有很多其他優秀的教程。

希望有所幫助。