本文目錄導(dǎo)讀：

1. 使用CSS實現(xiàn)菜單點擊變色

CSS實現(xiàn)菜單項點擊變色效果的方法

在網(wǎng)頁設(shè)計中，菜單項點擊變色是一種常見的交互效果，能夠提升用戶體驗，通過CSS，我們可以輕松地實現(xiàn)這一功能，本文將介紹如何使用CSS實現(xiàn)多個菜單中只點擊一個變色的效果。

使用CSS實現(xiàn)菜單點擊變色

1、HTML結(jié)構(gòu)

我們需要創(chuàng)建基本的HTML結(jié)構(gòu)，包括多個菜單項。

<ul class="menu">
  <li class="menu-item">菜單項一</li>
  <li class="menu-item">菜單項二</li>
  <li class="menu-item">菜單項三</li>
  <!-- 更多菜單項 -->
</ul>

2、CSS樣式

我們使用CSS為菜單項設(shè)置基本樣式，并添加點擊變色效果。

.menu-item {
  /* 基本樣式 */
  padding: 10px;
  cursor: pointer; /* 指示用戶可點擊 */
}
.menu-item:active, .menu-item.active {
  /* 點擊時的樣式 */
  background-color: #f0f0f0; /* 變色效果 */
}

3、JavaScript交互

為了實現(xiàn)點擊一個菜單項時其他菜單項不變色，我們需要使用JavaScript來處理交互邏輯。

document.querySelectorAll('.menu-item').forEach(function(item) {
  item.addEventListener('click', function() {
    // 移除其他菜單項的active狀態(tài)
    document.querySelectorAll('.menu-item').forEach(function(otherItem) {
      otherItem.classList.remove('active'); // 其他菜單項移除active類名，恢復(fù)默認樣式
    });
    // 為當(dāng)前點擊的菜單項添加active狀態(tài)，實現(xiàn)變色效果
    this.classList.add('active'); // 當(dāng)前點擊的菜單項添加active類名，實現(xiàn)變色效果，由于使用了CSS偽類:active，所以不需要額外處理鼠標(biāo)抬起事件。
  });
});

通過以上步驟，我們可以輕松實現(xiàn)多個菜單中只點擊一個變色的效果，在實際項目中，可以根據(jù)需求調(diào)整樣式和交互邏輯，提升用戶體驗，還可以考慮使用CSS動畫、過渡等***特性，為菜單交互增添更多視覺效果。