CSS制作選項(xiàng)卡的方法

在網(wǎng)頁(yè)設(shè)計(jì)中，選項(xiàng)卡是一種常用的導(dǎo)航方式，它可以讓用戶(hù)在不同的內(nèi)容塊之間快速切換，使用CSS制作選項(xiàng)卡，可以通過(guò)設(shè)置樣式和添加交互來(lái)實(shí)現(xiàn)。

我們需要?jiǎng)?chuàng)建HTML結(jié)構(gòu)，選項(xiàng)卡由幾個(gè)標(biāo)簽組成，每個(gè)標(biāo)簽對(duì)應(yīng)一個(gè)內(nèi)容塊。

<div class="tab-container">
    <div class="tab">選項(xiàng)卡1</div>
    <div class="tab">選項(xiàng)卡2</div>
    <div class="tab">選項(xiàng)卡3</div>
    <div class="content">
        <p>選項(xiàng)卡1的內(nèi)容</p>
    </div>
    <div class="content">
        <p>選項(xiàng)卡2的內(nèi)容</p>
    </div>
    <div class="content">
        <p>選項(xiàng)卡3的內(nèi)容</p>
    </div>
</div>

我們可以使用CSS來(lái)設(shè)置樣式，我們可以將選項(xiàng)卡設(shè)置為背景色為灰色，文字顏色為白色的樣式：

.tab-container {
    width: 200px;
    height: 300px;
    position: relative;
}
.tab {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #f0f0f0;
    color: #fff;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
.content {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
}

我們可以使用JavaScript來(lái)添加交互，我們可以使用addEventListener來(lái)監(jiān)聽(tīng)點(diǎn)擊事件，并根據(jù)點(diǎn)擊的標(biāo)簽來(lái)顯示對(duì)應(yīng)的內(nèi)容塊：

var tabs = document.querySelectorAll('.tab');
var content = document.querySelectorAll('.content');
for (var i = 0; i < tabs.length; i++) {
    var tab = tabs[i];
    var contentBlock = content[i];
    tab.addEventListener('click', function() {
        for (var j = 0; j < content.length; j++) {
            content[j].style.display = 'none';
        }
        contentBlock.style.display = 'block';
    });
}