Michael Zippo
CSS 選項卡非常適合在一個易於導航的位置顯示相關信息。它們基本上看起來像您在食譜盒或活頁夾中看到的標籤式分隔器。使用導航選項卡的網站示例：
當您查看這兩個網站時，請考慮在網站上使用此類用戶界面組件的好處。需要解決哪些問題？什麼類型的信息將是導航選項卡是一項好的開發工作？
當您需要找到將文本或信息組織成有意義的組件並將它們顯示在屏幕上的用戶界面樹時，無需佔用太多空間，導航選項卡是一個明智的選擇。當我們開始使用 JavaScript、jQuery 和/或 Bootstrap 時，我們將更深入地討論導航選項卡，但也有一個我們可以使用的正式工作，它只需要純 HTML 和 CSS。讓我們看一下配置：
繼續配置您的標準 HTML，在正文中使用一個容器作為項目的主容器.您可以在 class 屬性中隨意命名，但我將其命名為 class = "tabs"。到目前為止，您的 HTML 代碼應如下所示：
在中tabs" 並使用 tab 類調用每個。這代表了我們今天將要寫的四張卡片中的每一張。它將包含我們的條目、標籤標籤和標籤內容。讓我們為所有這些創建空容器：
裡面的內容類名就是我們的內容。您可以使用任何您想要的內容，但通常的做法是在選項卡中使用關聯的內容
在編寫 CSS 時，從最大的容器開始，一直到最小的容器，這是我們完成它所需的最低限度。工作：
此時您將看到看起來像四個文本塊，帶有一個按鈕單选和一些內容，因此我們需要找到一種方法來顯示選定的塊並隱藏其他塊。
如果您現在檢查您的工作，您會看到標籤帶有圓形單選按鈕在他們的左邊。所以，它看起來更像是一個傳統的選項卡，但要保持按鈕的 selected 屬性，我們需要隱藏單選按鈕的圓形部分。
因此，我們必須接近實際內容，以便一次只顯示一個標籤。
現在當用戶點擊每個選項卡時，他們應該能夠在它們之間切換而不會看到其他面板的內容. 這是工作中導航選項卡的最低要求 嘗試使用 CSS 來改變樣式！一個調試工作的代碼在上面-下面：
