CSS導航欄的點擊變色是實現網頁交互效果的重要一步。通過CSS的編寫，可以輕松實現導航欄在被點擊時變色的效果。下面我們來看一下具體的實現方法。

ul li:hover,
ul li:focus,
ul li:active {
background-color: #555;
color: #fff;
}

首先，在CSS中為導航欄的樣式設置一般狀態下的樣式。在這里，我們為導航欄設置一個灰色的背景色和白色的字體色。

ul li {
background-color: #ddd;
color: #555;
display: inline-block;
padding: 10px;
margin-right: 5px;
}

接下來，在CSS中為導航欄添加:hover, :focus, :active 偽類來實現在導航欄被鼠標點擊時變色的效果。在這里，我們為導航欄設置一個黑色的背景色和白色的字體色。

同時，我們也可以為導航欄增加一些過渡效果，來增加網頁的動感效果。

ul li {
background-color: #ddd;
color: #555;
display: inline-block;
padding: 10px;
margin-right: 5px;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}

最后，在HTML中為導航欄添加 click 事件，并將JavaScript與CSS結合起來，來實現交互效果。

<ul>
<li onclick="changeColor(this)">首頁</li>
<li onclick="changeColor(this)">產品介紹</li>
<li onclick="changeColor(this)">聯系我們</li>
</ul>
<script>
function changeColor(clickedElement) {
const navItems = document.querySelectorAll('ul li');
for (let i = 0; i < navItems.length; i++) {
navItems[i].classList.remove('active');
}
clickedElement.classList.add('active');
}
</script>

這里，我們通過設置一個 active 類，來為導航欄添加點擊變色的效果。當用戶點擊導航欄時，JavaScript 代碼會為被點擊的導航欄添加 active 類，并將其他導航欄的 active 類刪除，從而達到實現導航欄點擊變色效果的目的。