CSS導(dǎo)航是網(wǎng)站制作中非常重要的一部分，它可以讓用戶更方便地瀏覽網(wǎng)站內(nèi)容。在CSS設(shè)計(jì)中，我們經(jīng)常需要對(duì)導(dǎo)航菜單使用點(diǎn)擊事件進(jìn)行交互。下面就來看一下如何實(shí)現(xiàn)CSS導(dǎo)航點(diǎn)擊事件。

.nav-menu {
display: flex;
justify-content: center;
align-items: center;
}
.nav-item {
padding: 10px;
cursor: pointer;
}
.nav-item:hover {
background-color: #eee;
}
.active {
font-weight: bold;
}

以上代碼是CSS導(dǎo)航的基本樣式，其中每個(gè)導(dǎo)航項(xiàng)都有一個(gè).nav-item的類，當(dāng)鼠標(biāo)懸停其上時(shí)會(huì)顯示背景色，并且當(dāng)被選中時(shí)會(huì)使用.active類展示為加粗字體。

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

這段JavaScript代碼實(shí)現(xiàn)了CSS導(dǎo)航的點(diǎn)擊事件。通過querySelectorAll()方法獲取所有的.nav-item項(xiàng)，然后使用forEach()方法遍歷每個(gè)項(xiàng)。當(dāng)某個(gè)項(xiàng)被點(diǎn)擊時(shí)，首先將所有的.nav-item項(xiàng)的.active類移除，然后為被點(diǎn)擊的項(xiàng)添加.active類，從而實(shí)現(xiàn)了導(dǎo)航項(xiàng)的選中效果。

上面的代碼只是點(diǎn)擊事件的一種實(shí)現(xiàn)方式，實(shí)際上，你也可以自己嘗試更多的樣式效果，例如在選中項(xiàng)下方添加一個(gè)下劃線、改變導(dǎo)航欄背景色等等。利用CSS和JavaScript，我們可以實(shí)現(xiàn)許多酷炫的效果，讓用戶體驗(yàn)更加完美。