CSS 選項卡非常適合在一個易於導航的位置顯示相關信息。它們基本上看起來像您在食譜盒或活頁夾中看到的標籤式分隔器。使用導航選項卡的網站示例:
當您查看這兩個網站時,請考慮在網站上使用此類用戶界面組件的好處。需要解決哪些問題?什麼類型的信息將是導航選項卡是一項好的開發工作?
當您需要找到將文本或信息組織成有意義的組件並將它們顯示在屏幕上的用戶界面樹時,無需佔用太多空間,導航選項卡是一個明智的選擇。當我們開始使用 JavaScript、jQuery 和/或 Bootstrap 時,我們將更深入地討論導航選項卡,但也有一個我們可以使用的正式工作,它只需要純 HTML 和 CSS。讓我們看一下配置:
配置您的 HTML 代碼:
繼續配置您的標準 HTML,在正文中使用一個容器作為項目的主容器.您可以在 class 屬性中隨意命名,但我將其命名為 class = "tabs"
。到目前為止,您的 HTML 代碼應如下所示: