CSS導航欄是網頁設計中非常重要的一個組件，它可以讓網站的結構更清晰、更易于用戶使用。其中，一個很有用的功能是點擊切換，可以讓用戶在不同的頁面之間輕松切換。那么，下面就來介紹一下如何使用CSS實現這種功能。

/* 定義導航欄的樣式，包括背景、字體等 */
nav {
background-color: #333;
color: #fff;
font-size: 16px;
font-weight: bold;
display: flex;
justify-content: space-between;
}
/* 定義導航欄中每個鏈接的樣式，包括在鼠標經過時的效果 */
nav a {
color: #fff;
padding: 10px;
text-decoration: none;
}
nav a:hover {
background-color: #fff;
color: #333;
}
/* 定義一個類來表示當前頁面所在的鏈接 */
.active {
background-color: #fff;
color: #333;
}
/* 在HTML中使用類來表示當前頁面所在的鏈接 */
<nav>
<a href="#" class="active">首頁</a>
<a href="#">產品介紹</a>
<a href="#">聯系我們</a>
</nav>
/* 在JavaScript中監聽點擊事件，當用戶點擊時給當前鏈接添加active類 */
let links = document.querySelectorAll('nav a');
for (let i = 0; i < links.length; i++) {
links[i].addEventListener('click', function() {
document.querySelector('.active').classList.remove('active');
this.classList.add('active');
})
}

以上就是實現點擊切換的CSS導航欄的完整代碼。我們定義了一個active類，表示當前頁面所在的鏈接。在JavaScript中，我們使用addEventListener方法監聽每個鏈接的點擊事件。當用戶點擊某個鏈接時，我們先移除之前的active類，再給當前鏈接添加active類，這樣就能實現點擊切換了。