实现列表点击选中样式持久化与互斥：一个JavaScript教程

<div class="sidebar">   <div class="heading">     <h1>Select Country</h1>   </div>   <ul class="countryList">     <li class="countryItem" id="australia">Australia</li>     <li class="countryItem" id="france">France</li>     <li class="countryItem" id="germany">Germany</li>   </ul> </div>

ul {     list-style-type: none;     font-size: 12px;     margin: 0;     padding: 20px; }  li {   cursor: pointer; /* 鼠标悬停时显示手型指针 */   color: #000;    /* 默认文本颜色 */   font-weight: 400; /* 默认字重 */ }

// 获取所有列表项 const items = document.getElementsByClassName('countryItem');  // 定义一个变量来存储当前被点击（选中）的列表项的ID let clickedItemId = '';  // 为每个列表项添加事件监听器 Array.from(items).forEach(function(item) {     // 鼠标悬停事件：应用悬停样式     item.addEventListener('mouseover', function() {         // 应用悬停样式，通常会比默认样式更突出         this.style.color = '#007dbc';         this.style.fontWeight = "700";     });      // 鼠标移出事件：移除悬停样式，但保留选中项的样式     item.addEventListener('mouseout', function() {         // 如果当前移出的元素是被点击的（选中）元素，则不移除其样式         if (this.id === clickedItemId) {             return; // 保持选中样式         }         // 否则，恢复默认样式         this.style.color = '#000';         this.style.fontWeight = "400";     });      // 鼠标点击事件：处理选中状态的切换和样式持久化     item.addEventListener('click', function() {         // 1. 如果之前有已选中的列表项，则先移除其选中样式         if (clickedItemId) {             const prevItem = document.getElementById(clickedItemId);             // 确保找到的元素存在，并且不是当前点击的元素（避免对自身重复操作）             if (prevItem && prevItem.id !== this.id) {                 prevItem.style.color = '#000';                 prevItem.style.fontWeight = "400";             }         }          // 2. 为当前点击的列表项应用选中样式         // 注意：原始答案中使用 '#0007dbc'，这可能是一个笔误，通常是 '#007dbc'。         // 为了与原始答案保持一致，此处沿用 '#0007dbc'。         this.style.color = '#0007dbc';          this.style.fontWeight = "700";          // 3. 更新 clickedItemId 为当前点击项的ID         clickedItemId = this.id;     }); });