本文目錄導讀：

1. 使用CSS的:active偽類
2. 結(jié)合JavaScript實現(xiàn)持久化變化

CSS技巧：實現(xiàn)鏈接點擊后的顏色變化

在網(wǎng)頁設(shè)計中，我們常常需要實現(xiàn)一種功能，即當用戶點擊某個鏈接后，該鏈接的顏色會發(fā)生變化，這種交互效果可以通過CSS輕松實現(xiàn)，下面，我們將詳細介紹如何通過CSS實現(xiàn)鏈接點擊后的顏色變化。

使用CSS的:active偽類

CSS中的:active偽類可以用于選中用戶激活（點擊）的元素，我們可以利用這個特性，為點擊的鏈接設(shè)置顏色變化。

a:active {
  color: red; /* 設(shè)置點擊時的鏈接顏色 */
}

當用戶點擊鏈接時，鏈接的顏色會變?yōu)榧t色，當用戶松開鼠標后，鏈接顏色會恢復為默認顏色。

結(jié)合JavaScript實現(xiàn)持久化變化

上述方法只在用戶點擊鏈接時改變顏色，松開鼠標后顏色會恢復默認，為了實現(xiàn)點擊后顏色變化的持久化，我們需要結(jié)合JavaScript，可以通過為鏈接添加類名來實現(xiàn)。

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止鏈接的默認行為
  this.classList.add('visited'); // 添加一個表示已訪問的類名
});

然后在CSS中定義.visited類：

a.visited {
  color: green; /* 設(shè)置已訪問鏈接的顏色 */
}

這樣，當用戶點擊鏈接后，鏈接的顏色會變?yōu)榫G色，并且這個變化是持久的，即使頁面刷新也不會消失。

通過CSS的:active偽類和結(jié)合JavaScript，我們可以輕松實現(xiàn)鏈接點擊后的顏色變化，這種方法不僅可以提高用戶體驗，還可以使網(wǎng)頁更具交互性，在實際項目中，可以根據(jù)需求選擇適合的方法來實現(xiàn)這一功能。