選項(xiàng)卡導(dǎo)航是網(wǎng)頁(yè)常用的導(dǎo)航形式之一，它可以有效地整理網(wǎng)頁(yè)內(nèi)容。在設(shè)計(jì)選項(xiàng)卡導(dǎo)航時(shí)，我們需要用到一些基本的 CSS 屬性。

首先，我們需要定義導(dǎo)航的外部容器，并設(shè)置display: flex，以達(dá)到均勻分配子元素寬度的效果：

.nav {
display: flex;
}

接下來(lái)，定義每個(gè)選項(xiàng)卡的樣式。我們可以使用border和padding屬性來(lái)設(shè)置選項(xiàng)卡的邊框和內(nèi)邊距：

.nav-item {
border: 1px solid #ccc;
padding: 10px;
}

然后，我們需要添加一個(gè)活動(dòng)狀態(tài)類，以便在當(dāng)前選項(xiàng)卡上添加樣式。在活動(dòng)狀態(tài)類中，我們可以修改背景色和字體顏色：

.active {
background-color: #fff;
color: #333;
}

最后，我們需要使用 JavaScript 來(lái)添加活動(dòng)狀態(tài)類。當(dāng)用戶點(diǎn)擊某個(gè)選項(xiàng)卡時(shí)，我們可以使用classList.add()方法來(lái)添加活動(dòng)狀態(tài)類：

const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item =>{
item.addEventListener('click', () =>{
navItems.forEach(item =>item.classList.remove('active'));
item.classList.add('active');
});
});

以上是選項(xiàng)卡導(dǎo)航的基本樣式和交互效果，我們可以根據(jù)實(shí)際需求進(jìn)行定制。