英文 | https://niemvuilaptrinh.medium.com/34-javascript-css-tabs-for-websites-2021-3c4d151db7ef
翻譯 | 楊小愛
今天的文章内容将介紹使用 CSS 和 Javascript 建構的頁籤元件，以幫助您更好的開發和設計您的網站，并改善使用者在使用網站時的體驗。
現在讓我們深入了解這些常用的頁籤元件！
什麼是元件頁籤？
頁籤元件是網頁中使用的導航元素，使用者可以通過單擊頁籤上方的标題輕松通路不同的内容。
它可以幫助您優化網站元素的頁面占用率，主要目的是幫助使用者概括我們想要傳達的内容以及在手機等裝置上的顯示更加有條理和整潔。
使用頁籤時一些需要注意的事項：
- 必須顯示哪個頁籤處于活動狀态，以便使用者可以确定他們在内容中的位置。
- 應在同一行中顯示頁籤标題。
- 為每個頁籤标題使用盡可能最短和最簡潔的措辭。
- 标題必須與内容相關。
- 當使用者切換到其他頁籤時，避免頁面重新加載。
為了更容易了解，請看下面的例子：
下面我們就開始今天的内容吧。
01、HTML導航欄标簽
Demo位址：https://codepen.io/team/keyframers/pen/xvoBrx
02、CSS頁籤
Demo位址：https://codepen.io/ejsado/pen/wDJab
03、動畫過渡頁籤
Demo位址：https://codepen.io/flkt-crnpio/pen/WxROwy
04、CSS頁籤
Demo位址：https://codepen.io/mildrenben/pen/bdGdOb
05、水準滾動頁籤
Demo位址：https://codepen.io/onlyveen/pen/EXpEqP
06、純CSS标簽頁籤
Demo位址：https://codepen.io/wallaceerick/pen/ojtal
07、HTML CSS頁籤
Demo位址：https://codepen.io/YozhEzhi/pen/gcLpI
08、JQuery頁籤标簽
Demo位址：https://codepen.io/interstellar/pen/zNapzo
09、HTML頁籤
Demo位址：https://codepen.io/alexlime/pen/qmIdx
10、帶有圖示的HTML頁籤
Demo位址：https://codepen.io/RGonyeau/pen/Mvrzxx
11、響應式頁籤
Demo位址：https://codepen.io/derekjp/pen/pPqwXJ
12、使用者界面頁籤
Demo位址：https://codepen.io/juliepark/pen/pLMxoP
13、CSS頁籤
Demo位址:https://codepen.io/Ramnk7/pen/yWBWEe
14、CSS切換動畫
Demo位址：https://codepen.io/aaroniker/pen/YRKGPV
15、垂直頁籤界面
Demo位址:https://codepen.io/hilotacker/pen/dXpeYg
16、 漂亮的CSS頁籤
Demo位址：https://codepen.io/jdniki/pen/PzZERJ
17、CSS JavaScript 頁籤懸停效果
Demo位址:https://codepen.io/rafaelavlucas/pen/MLKGba
18、純CSS頁籤效果
Demo位址：https://codepen.io/woranov/pen/NRqLWK
19、垂直頁籤
Demo位址：https://codepen.io/codesuey/pen/zwyGxm
20、純CSS頁籤
Demo位址：https://codepen.io/jakealbaugh/pen/KBsIo
21、響應式CSS頁籤
Demo位址：https://codepen.io/josh_vogt/pen/EaaZbP
22、純CSS頁籤
Demo位址：https://codepen.io/raevenk/pen/ojXMzV
23、CSS導航标簽
Demo位址：https://codepen.io/chrysokitty/pen/bnsxr
24、純CSS響應式頁籤
Demo位址：https://codepen.io/JamieKDonnelly/pen/wBQQPK
25、JavaScript CSS實作的簡單響應式标簽
Demo位址：https://codepen.io/gigghem/pen/RNBNvq
26、純CSS響應式标簽
Demo位址：https://codepen.io/japick/pen/NvqKLJ
27、帶有圖示的頁籤
Demo位址：https://codepen.io/Danil89/pen/pyqpZj
28、響應式頁籤
Demo位址：https://codepen.io/imprakash/pen/epZvbQ
29、純CSS實作的簡單頁籤标簽合集
Demo位址：https://codepen.io/poppe1219/pen/FsxBa
30、純CSS實作的頁籤
Demo位址：https://codepen.io/axelaredz/pen/ipome
31、動畫頁籤
Demo位址：https://codepen.io/AngelKrak/pen/kbzlr
32、CSS動畫過渡頁籤
Demo位址:https://codepen.io/Kseso/pen/heysk
33、帶圖示的CSS頁籤
Demo位址:https://codepen.io/ejsado/pen/gPVgVv
34、動畫頁籤
Demo位址:https://codepen.io/PointC/pen/rZZGRj
總結
希望通過今天的練習内容，可以幫助您提升開發效率，同時，我也希望這篇文章能為您提供有用的标簽元件，用于開發、網頁設計。
如果您有任何問題，請在留言區給我留言。
最後，如果您覺得今天的内容對您有幫助，請給我點個贊。