CSS導航欄是網頁中非常重要的一個組成部分，它可以幫助用戶快速地瀏覽和訪問網頁的不同部分。當用戶點擊導航欄中的鏈接時，常常需要修改相應的樣式，以便告訴用戶當前所處位置。下面就介紹一下如何實現這個功能。

.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav ul {
display: flex;
list-style: none;
}
.nav li {
margin-right: 20px;
}
.nav a {
text-decoration: none;
color: #333;
}
.nav a.active {
color: #ff6347;
}

上面的樣式代碼是一個基本的導航欄結構。我們需要給每個鏈接添加一個事件監聽器，當它被點擊時，就添加一個.active類，以便修改當前鏈接的樣式。

var links = document.querySelectorAll('.nav a');
links.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault();
links.forEach(function(otherLink) {
otherLink.classList.remove('active');
});
this.classList.add('active');
});
});

上面的JavaScript代碼為所有的鏈接添加了一個點擊事件監聽器。當用戶點擊鏈接時，它阻止了默認的鏈接行為并首先移除了所有其他鏈接的.active類。然后，它添加了一個.active類到當前點擊的鏈接，以便顯示當前的位置。