實(shí)現(xiàn)選項(xiàng)卡的核心是通過(guò)javascript控制內(nèi)容區(qū)域的顯示與隱藏，并用css標(biāo)記激活狀態(tài)，具體需結(jié)合html結(jié)構(gòu)、css樣式和javascript邏輯共同完成，其中html負(fù)責(zé)搭建導(dǎo)航按鈕與內(nèi)容區(qū)域并用data屬性關(guān)聯(lián)，css通過(guò).active類控制顯示（display: block）與隱藏（display: none）并提供視覺(jué)反饋，javascript則監(jiān)聽(tīng)按鈕點(diǎn)擊事件，動(dòng)態(tài)移除和添加active類以切換狀態(tài)，同時(shí)可通過(guò)事件委托優(yōu)化性能、增加aria屬性提升無(wú)障礙訪問(wèn)、利用url哈希實(shí)現(xiàn)頁(yè)面錨點(diǎn)定位、支持鍵盤(pán)導(dǎo)航增強(qiáng)交互性，并在響應(yīng)式設(shè)計(jì)中結(jié)合媒體查詢轉(zhuǎn)換為手風(fēng)琴模式，**可通過(guò)封裝為可復(fù)用組件或使用現(xiàn)代框架（如react、vue）及web components實(shí)現(xiàn)**維護(hù)與跨項(xiàng)目應(yīng)用，從而構(gòu)建既實(shí)用又具備良好用戶體驗(yàn)的選項(xiàng)卡功能。

JS實(shí)現(xiàn)選項(xiàng)卡，說(shuō)白了，就是利用JavaScript來(lái)控制網(wǎng)頁(yè)上不同內(nèi)容區(qū)域的顯示與隱藏，同時(shí)配合CSS來(lái)給當(dāng)前選中的“標(biāo)簽”一個(gè)視覺(jué)上的激活狀態(tài)。這事兒核心在于事件監(jiān)聽(tīng)和DOM操作。

解決方案

實(shí)現(xiàn)一個(gè)選項(xiàng)卡，通常需要三樣?xùn)|西：HTML結(jié)構(gòu)、CSS樣式，以及JavaScript邏輯。

HTML結(jié)構(gòu)： 我們需要一組導(dǎo)航元素作為選項(xiàng)卡按鈕，以及對(duì)應(yīng)的多個(gè)內(nèi)容區(qū)域。每個(gè)內(nèi)容區(qū)域應(yīng)該能和它的選項(xiàng)卡按鈕關(guān)聯(lián)起來(lái)。我喜歡用

data-

屬性來(lái)做這個(gè)關(guān)聯(lián)，清晰又靈活。

    

        Tab 1
        Tab 2
        Tab 3
    
    

        

            
這是Tab 1的內(nèi)容
            
這里放著**個(gè)選項(xiàng)卡里的詳細(xì)信息。
        
        

            
這是Tab 2的內(nèi)容
            
第二個(gè)選項(xiàng)卡，可能包含一些圖片或者表格。
        
        

            
這是Tab 3的內(nèi)容
            
**一個(gè)選項(xiàng)卡，隨便寫(xiě)點(diǎn)什么，比如聯(lián)系方式。
        
    

CSS樣式： CSS主要負(fù)責(zé)隱藏非激活內(nèi)容，以及給激活的選項(xiàng)卡按鈕和內(nèi)容區(qū)添加樣式。

.tabs-nav {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.tab-button {
    padding: 10px 15px;
    border: none;
    background-color: #f0f0f0;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 5px;
    border-radius: 5px 5px 0 0;
}

.tab-button:hover {
    background-color: #e0e0e0;
}

.tab-button.active {
    background-color: #fff;
    border-bottom: 2px solid #007bff;
    color: #007bff;
    font-weight: bold;
}

.tab-pane {
    display: none; /* 默認(rèn)隱藏所有內(nèi)容 */
    padding: 20px;
    border: 1px solid #eee;
    border-top: none;
    background-color: #fff;
    border-radius: 0 0 5px 5px;
}

.tab-pane.active {
    display: block; /* 激活時(shí)顯示 */
}

JavaScript邏輯： 這是核心。我們需要獲取所有按鈕和內(nèi)容區(qū)域，然后給每個(gè)按鈕添加點(diǎn)擊事件**。當(dāng)按鈕被點(diǎn)擊時(shí)，我們做的就是把所有“active”狀態(tài)清掉，然后給當(dāng)前點(diǎn)擊的按鈕和它對(duì)應(yīng)的內(nèi)容區(qū)域加上“active”狀態(tài)。

document.addEventListener('DOMContentLoaded', () => {
    const tabButtons = document.querySelectorAll('.tab-button');
    const tabPanes = document.querySelectorAll('.tab-pane');

    tabButtons.forEach(button => {
        button.addEventListener('click', () => {
            // 移除所有按鈕和內(nèi)容區(qū)的激活狀態(tài)
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabPanes.forEach(pane => pane.classList.remove('active'));

            // 給當(dāng)前點(diǎn)擊的按鈕添加激活狀態(tài)
            button.classList.add('active');

            // 獲取目標(biāo)內(nèi)容區(qū)的ID，并給它添加激活狀態(tài)
            const targetId = button.dataset.target;
            const targetPane = document.getElementById(targetId);
            if (targetPane) {
                targetPane.classList.add('active');
            }
        });
    });

    // 確保頁(yè)面加載時(shí)**個(gè)選項(xiàng)卡是激活的
    // 如果沒(méi)有在HTML中設(shè)置初始active，可以在這里手動(dòng)激活**個(gè)
    // if (tabButtons.length > 0 && !document.querySelector('.tab-button.active')) {
    //     tabButtons[0].click(); // 模擬點(diǎn)擊**個(gè)按鈕
    // }
});

選項(xiàng)卡實(shí)現(xiàn)中常見(jiàn)的坑與優(yōu)化策略

在實(shí)現(xiàn)選項(xiàng)卡的過(guò)程中，有些地方是新手特別容易踩坑的，或者說(shuō)，是可以做得更好的。

一個(gè)常見(jiàn)的“坑”就是無(wú)視無(wú)障礙性（Accessibility）。我們做網(wǎng)頁(yè)，不能只想著鼠標(biāo)用戶，鍵盤(pán)用戶、屏幕閱讀器用戶也得考慮進(jìn)來(lái)。這意味著，我們的選項(xiàng)卡不僅要能用鼠標(biāo)點(diǎn)，還得能用Tab鍵切換焦點(diǎn)，用Enter或Space鍵激活。我個(gè)人覺(jué)得，給選項(xiàng)卡按鈕加上

role="tab"

，內(nèi)容區(qū)加上

role="tabpanel"

，以及用

aria-selected

和

aria-labelledby

關(guān)聯(lián)起來(lái)，雖然寫(xiě)起來(lái)多幾行代碼，但對(duì)用戶體驗(yàn)的提升是巨大的。很多時(shí)候，我們?yōu)榱丝焖賹?shí)現(xiàn)功能，會(huì)忽略這些細(xì)節(jié)，但長(zhǎng)遠(yuǎn)來(lái)看，這是個(gè)很大的問(wèn)題。

性能方面，如果你的選項(xiàng)卡內(nèi)容非常多或者很復(fù)雜，比如里面嵌了大量的圖片、視頻或者其他重型組件，那么每次切換都直接

display: block

可能會(huì)有那么一瞬間的卡頓。這時(shí)，你可以考慮用

opacity: 0

和

pointer-events: none

來(lái)隱藏，配合CSS

transition

來(lái)做**過(guò)渡，或者更**一點(diǎn)，做內(nèi)容懶加載，只在用戶點(diǎn)擊時(shí)才去加載對(duì)應(yīng)選項(xiàng)卡里的內(nèi)容。但說(shuō)實(shí)話，對(duì)于大多數(shù)簡(jiǎn)單選項(xiàng)卡，

display: none/block

就足夠了，別過(guò)度優(yōu)化，那反而會(huì)增加代碼復(fù)雜度。

還有就是事件委托。上面代碼里我直接給每個(gè)按鈕加了**，對(duì)于少量選項(xiàng)卡沒(méi)問(wèn)題。但如果你的頁(yè)面里有幾十個(gè)甚至上百個(gè)這樣的選項(xiàng)卡（雖然這種情況不多見(jiàn)），那么給每個(gè)按鈕都加**會(huì)消耗更多內(nèi)存。更好的做法是使用事件委托，也就是把**加到它們的共同父元素上，然后通過(guò)事件冒泡來(lái)判斷是哪個(gè)子元素被點(diǎn)擊了。這樣，無(wú)論有多少個(gè)按鈕，都只需要一個(gè)**，效率會(huì)高很多。

如何讓選項(xiàng)卡更具交互性和用戶體驗(yàn)？

讓選項(xiàng)卡不僅僅是“能用”，而是“好用”，這中間的門(mén)道還挺多的。

視覺(jué)上的反饋是個(gè)關(guān)鍵。當(dāng)用戶點(diǎn)擊一個(gè)選項(xiàng)卡時(shí)，如果內(nèi)容只是瞬間切換，可能會(huì)顯得有些生硬。這時(shí)候，CSS過(guò)渡動(dòng)畫(huà)就能派上用場(chǎng)了。比如，內(nèi)容區(qū)域從透明度0漸變到1，或者從左側(cè)/右側(cè)滑入。這種微小的動(dòng)畫(huà)效果，能極大地提升用戶感知的流暢度。當(dāng)然，動(dòng)畫(huà)不能太花哨，要恰到好處，不然反而會(huì)分散用戶注意力。我一般喜歡用簡(jiǎn)單的

opacity

過(guò)渡，感覺(jué)最自然。

URL哈希（Hash）的集成也是一個(gè)很棒的功能。想象一下，用戶點(diǎn)擊了一個(gè)選項(xiàng)卡，然后他們想把當(dāng)前這個(gè)特定選項(xiàng)卡的狀態(tài)分享給朋友。如果你的URL能變成

yourwebsite.com/#tab-content-id

，那么當(dāng)朋友打開(kāi)這個(gè)鏈接時(shí)，對(duì)應(yīng)的選項(xiàng)卡就能自動(dòng)激活，這不就省去了朋友再次點(diǎn)擊的麻煩嗎？實(shí)現(xiàn)起來(lái)也不復(fù)雜，在點(diǎn)擊事件里更新

window.location.hash

，然后在頁(yè)面加載時(shí)檢查這個(gè)哈希值，如果有就自動(dòng)激活對(duì)應(yīng)的選項(xiàng)卡。

鍵盤(pán)導(dǎo)航剛才提了一嘴，但它真的很重要。確保用戶可以通過(guò)Tab鍵在選項(xiàng)卡按鈕之間移動(dòng)，然后用Enter或Space鍵激活選中的選項(xiàng)卡。這不僅對(duì)無(wú)障礙用戶友好，對(duì)那些喜歡用鍵盤(pán)操作的效率黨來(lái)說(shuō)，也是個(gè)福音。這需要一些額外的JavaScript邏輯來(lái)監(jiān)聽(tīng)鍵盤(pán)事件，并管理焦點(diǎn)。

**，響應(yīng)式設(shè)計(jì)也不能忘。在小屏幕上，傳統(tǒng)的水平選項(xiàng)卡可能會(huì)擠成一團(tuán)，變得很難看。一個(gè)常見(jiàn)的做法是，當(dāng)屏幕寬度小于某個(gè)閾值時(shí)，將選項(xiàng)卡切換為手風(fēng)琴（Accordion）模式，也就是每個(gè)選項(xiàng)卡標(biāo)題下面直接跟著它的內(nèi)容，可以展開(kāi)和收起。這需要一些媒體查詢（Media Queries）和額外的JavaScript邏輯來(lái)處理不同屏幕尺寸下的布局和交互。

選項(xiàng)卡組件化思考與未來(lái)展望

寫(xiě)完上面這些，你可能會(huì)覺(jué)得，實(shí)現(xiàn)一個(gè)選項(xiàng)卡好像要考慮不少東西，代碼也散落在HTML、CSS、JS里。如果我有很多地方要用選項(xiàng)卡，難道每次都復(fù)制粘貼一遍嗎？這就是“組件化”思想的用武之地了。

把選項(xiàng)卡的功能封裝成一個(gè)可復(fù)用的組件，是我個(gè)人在項(xiàng)目開(kāi)發(fā)中非常推崇的做法。你可以把它寫(xiě)成一個(gè)獨(dú)立的JavaScript類或者函數(shù)，接收一些配置參數(shù)（比如選項(xiàng)卡按鈕的選擇器、內(nèi)容區(qū)域的選擇器、默認(rèn)激活的索引等），然后一調(diào)用就能生成一個(gè)選項(xiàng)卡實(shí)例。這樣，下次再用，就只需要一行代碼，甚至不需要關(guān)心內(nèi)部的DOM操作細(xì)節(jié)。這大大提高了代碼的復(fù)用性和可維護(hù)性。

在現(xiàn)代前端框架，比如React、Vue或者Angular里，選項(xiàng)卡這種UI元素天生就是以組件的形式存在的。你只需要定義好組件的狀態(tài)（哪個(gè)選項(xiàng)卡是激活的），然后通過(guò)框架的數(shù)據(jù)綁定機(jī)制來(lái)控制視圖的渲染，事件處理也變得非常聲明式。比如在React里，可能就是一個(gè)

useState

來(lái)管理當(dāng)前激活的索引，然后通過(guò)條件渲染來(lái)顯示對(duì)應(yīng)內(nèi)容。這讓開(kāi)發(fā)者可以把更多精力放在業(yè)務(wù)邏輯上，而不是繁瑣的DOM操作。

至于未來(lái)，我覺(jué)得Web Components是一個(gè)很有意思的方向。它允許我們創(chuàng)建自定義的HTML元素，把HTML、CSS和JavaScript封裝在一起，形成一個(gè)獨(dú)立的、可復(fù)用的組件。這樣，我們甚至可以寫(xiě)一個(gè)

標(biāo)簽，然后它內(nèi)部就包含了所有的選項(xiàng)卡邏輯和樣式，外部**不用關(guān)心實(shí)現(xiàn)細(xì)節(jié)。這對(duì)于構(gòu)建可移植、無(wú)框架依賴的UI組件來(lái)說(shuō)，潛力巨大。當(dāng)然，目前瀏覽器支持度還需要進(jìn)一步提升，但在一些項(xiàng)目中，它已經(jīng)開(kāi)始展現(xiàn)出強(qiáng)大的生命力了。

總的來(lái)說(shuō)，選項(xiàng)卡看似簡(jiǎn)單，但要做到極致的用戶體驗(yàn)和良好的可維護(hù)性，還是有很多細(xì)節(jié)值得推敲的。從最基礎(chǔ)

上面即是JS如何實(shí)現(xiàn)選項(xiàng)卡的內(nèi)容了，文章的版權(quán)歸原作者所有，如有侵犯您的權(quán)利，請(qǐng)及時(shí)聯(lián)系本站刪除，更多相關(guān)js選項(xiàng)卡的資訊，請(qǐng)關(guān)注收藏本站。