英文 | https://niemvuilaptrinh.medium.com/34-javascript-css-tabs-for-websites-2021-3c4d151db7ef

翻譯 | 楊小愛

今天的文章內(nèi)容將介紹使用 CSS 和 Javascript 構(gòu)建的選項(xiàng)卡組件，以幫助您更好的開發(fā)和設(shè)計(jì)您的網(wǎng)站，并改善用戶在使用網(wǎng)站時(shí)的體驗(yàn)。

現(xiàn)在讓我們深入了解這些常用的選項(xiàng)卡組件！

什么是組件選項(xiàng)卡？

選項(xiàng)卡組件是網(wǎng)頁中使用的導(dǎo)航元素，用戶可以通過單擊選項(xiàng)卡上方的標(biāo)題輕松訪問不同的內(nèi)容。

它可以幫助您優(yōu)化網(wǎng)站元素的頁面占用率，主要目的是幫助用戶概括我們想要傳達(dá)的內(nèi)容以及在手機(jī)等設(shè)備上的顯示更加有條理和整潔。

使用選項(xiàng)卡時(shí)一些需要注意的事項(xiàng)：

• 必須顯示哪個(gè)選項(xiàng)卡處于活動(dòng)狀態(tài)，以便用戶可以確定他們?cè)趦?nèi)容中的位置。

• 應(yīng)在同一行中顯示選項(xiàng)卡標(biāo)題。

• 為每個(gè)選項(xiàng)卡標(biāo)題使用盡可能最短和最簡(jiǎn)潔的措辭。

• 標(biāo)題必須與內(nèi)容相關(guān)。

• 當(dāng)用戶切換到其他選項(xiàng)卡時(shí)，避免頁面重新加載。

為了更容易理解，請(qǐng)看下面的例子：

下面我們就開始今天的內(nèi)容吧。

01、HTML導(dǎo)航欄標(biāo)簽

Demo地址：https://codepen.io/team/keyframers/pen/xvoBrx

02、CSS選項(xiàng)卡

Demo地址：https://codepen.io/ejsado/pen/wDJab

03、動(dòng)畫過渡選項(xiàng)卡

Demo地址：https://codepen.io/flkt-crnpio/pen/WxROwy

04、CSS選項(xiàng)卡

Demo地址：https://codepen.io/mildrenben/pen/bdGdOb

05、水平滾動(dòng)選項(xiàng)卡

Demo地址：https://codepen.io/onlyveen/pen/EXpEqP

06、純CSS標(biāo)簽選項(xiàng)卡

Demo地址：https://codepen.io/wallaceerick/pen/ojtal

07、HTML CSS選項(xiàng)卡

Demo地址：https://codepen.io/YozhEzhi/pen/gcLpI

08、JQuery選項(xiàng)卡標(biāo)簽

Demo地址：https://codepen.io/interstellar/pen/zNapzo

09、HTML選項(xiàng)卡

Demo地址：https://codepen.io/alexlime/pen/qmIdx

10、帶有圖標(biāo)的HTML選項(xiàng)卡

Demo地址：https://codepen.io/RGonyeau/pen/Mvrzxx

11、響應(yīng)式選項(xiàng)卡

Demo地址：https://codepen.io/derekjp/pen/pPqwXJ

12、用戶界面選項(xiàng)卡

Demo地址：https://codepen.io/juliepark/pen/pLMxoP

13、CSS選項(xiàng)卡

Demo地址:https://codepen.io/Ramnk7/pen/yWBWEe

14、CSS切換動(dòng)畫

Demo地址：https://codepen.io/aaroniker/pen/YRKGPV

15、垂直選項(xiàng)卡界面

Demo地址:https://codepen.io/hilotacker/pen/dXpeYg

16、 漂亮的CSS選項(xiàng)卡

Demo地址：https://codepen.io/jdniki/pen/PzZERJ

17、CSS JavaScript 選項(xiàng)卡懸停效果

Demo地址:https://codepen.io/rafaelavlucas/pen/MLKGba

18、純CSS選項(xiàng)卡效果

Demo地址：https://codepen.io/woranov/pen/NRqLWK

19、垂直選項(xiàng)卡

Demo地址：https://codepen.io/codesuey/pen/zwyGxm

20、純CSS選項(xiàng)卡

Demo地址：https://codepen.io/jakealbaugh/pen/KBsIo

21、響應(yīng)式CSS選項(xiàng)卡

Demo地址：https://codepen.io/josh_vogt/pen/EaaZbP

22、純CSS選項(xiàng)卡

Demo地址：https://codepen.io/raevenk/pen/ojXMzV

23、CSS導(dǎo)航標(biāo)簽

Demo地址：https://codepen.io/chrysokitty/pen/bnsxr

24、純CSS響應(yīng)式選項(xiàng)卡

Demo地址：https://codepen.io/JamieKDonnelly/pen/wBQQPK

25、JavaScript CSS實(shí)現(xiàn)的簡(jiǎn)單響應(yīng)式標(biāo)簽

Demo地址：https://codepen.io/gigghem/pen/RNBNvq

26、純CSS響應(yīng)式標(biāo)簽

Demo地址：https://codepen.io/japick/pen/NvqKLJ

27、帶有圖標(biāo)的選項(xiàng)卡

Demo地址：https://codepen.io/Danil89/pen/pyqpZj

28、響應(yīng)式選項(xiàng)卡

Demo地址：https://codepen.io/imprakash/pen/epZvbQ

29、純CSS實(shí)現(xiàn)的簡(jiǎn)單選項(xiàng)卡標(biāo)簽合集

Demo地址：https://codepen.io/poppe1219/pen/FsxBa

30、純CSS實(shí)現(xiàn)的選項(xiàng)卡

Demo地址：https://codepen.io/axelaredz/pen/ipome

31、動(dòng)畫選項(xiàng)卡

Demo地址：https://codepen.io/AngelKrak/pen/kbzlr

32、CSS動(dòng)畫過渡選項(xiàng)卡

Demo地址:https://codepen.io/Kseso/pen/heysk

33、帶圖標(biāo)的CSS選項(xiàng)卡

Demo地址:https://codepen.io/ejsado/pen/gPVgVv

34、動(dòng)畫選項(xiàng)卡

Demo地址:https://codepen.io/PointC/pen/rZZGRj

總結(jié)

希望通過今天的練習(xí)內(nèi)容，可以幫助您提升開發(fā)效率，同時(shí)，我也希望這篇文章能為您提供有用的標(biāo)簽組件，用于開發(fā)、網(wǎng)頁設(shè)計(jì)。

如果您有任何問題，請(qǐng)?jiān)诹粞詤^(qū)給我留言。

最后，如果您覺得今天的內(nèi)容對(duì)您有幫助，請(qǐng)給我點(diǎn)個(gè)贊。

感謝您的時(shí)間，謝謝您的閱讀，祝編程愉快！

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)