創建HTML水平制表符的優雅方法是什么？

Question

我打算制作一個HTML網頁。 我想知道創建HTML 水平標簽 （作為導航欄）最優雅的方法是什么？

我想選擇選項卡和未選中的選項卡有不同的顏色。

我想我應該使用CSS來設置樣式，也許jQuery可以在不同的標簽下顯示和隱藏不同的內容？

Answer 1

使用jQuery UI Tabs模塊。

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

Answer 2

請參閱此URL，它可能會幫助您： - 2級選項卡和css水平選項卡

Answer 3

http://alistapart.com上有一篇關於CSS»滑動門«技術的精彩文章如何在網站上添加標簽式導航。 它是純HTML，但我相信你可以將它與javascript結合使用。

Answer 4

典型的最佳實踐是使用<li>元素作為選項卡和菜單（使用<ul>作為選項卡組的容器），並相應地設置它們的樣式。

造型的關鍵部分是：

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

float:left; 並display:inline-block; 它們都會產生類似的效果，因為它們會導致列表項顯示在水平行中。 它們以完全不同的方式實現它，這可能會影響您造型的其他方面，但是可以使用它們，具體取決於您更熟悉的方式。 （唯一需要注意的是，如果你需要支持IE6，在這種情況下， inline-block不起作用，但有解決辦法）

list-style:none; 告訴列表項不要顯示通常給出的項目符號。

除了這兩種風格之外，您幾乎可以使用任何您喜歡的CSS來讓它們看起來完全符合您的需求。 通常，選項卡有三個邊的邊框，圓角，突出顯示活動選項卡，如果將鼠標懸停在它們上...所有這些效果都可以通過CSS實現。

本文將詳細介紹如何實現所有這些效果等。 網上還有許多其他好的教程。

希望有所幫助。