如何实现点击同class a标签时仅当前项显示[current]标识

核心逻辑分两步：

• 点击任意下拉项时，先遍历所有.dropdown-item元素，移除所有元素末尾的[current]标识
• 给当前被点击的元素末尾追加[current]标识

优先使用事件委托方案，适配动态创建a标签的需求，不需要给每个新生成的标签重复绑定事件。

现有HTML结构参考：

完整代码示例 #

HTML结构 #

<div class="dropdown-menu">
  <a class="dropdown-item" href="#" data-color="#87CEEB">Sky</a>
  <a class="dropdown-item" href="#" data-color="#E0115F">Ruby</a>
  <a class="dropdown-item" href="#" data-color="#50C878">Emerald</a>
  <a class="dropdown-item" href="#" data-color="#353935">Obsidian</a>
</div>

JS逻辑 #

// 监听下拉容器点击事件，动态新增的下拉项也会自动生效
const dropdownMenu = document.querySelector('.dropdown-menu');
dropdownMenu.addEventListener('click', (e) => {
  // 精准匹配点击的dropdown-item元素
  const currentItem = e.target.closest('.dropdown-item');
  if (!currentItem || !dropdownMenu.contains(currentItem)) return;
  
  // 阻止a标签默认跳转行为
  e.preventDefault();

  // 清除所有项的current标记
  document.querySelectorAll('.dropdown-item').forEach(item => {
    // 正则仅匹配元素末尾的 [current]，不会误删颜色名称本身的文本
    item.textContent = item.textContent.replace(/\s*\[current\]$/, '');
  });

  // 给当前点击项追加标记
  currentItem.textContent += ' [current]';

  // 此处追加自定义颜色切换逻辑即可，比如读取data-color属性修改全局主题色
  // const selectedColor = currentItem.dataset.color;
  // document.documentElement.style.setProperty('--theme', selectedColor);
});

内联onclick写法 #

如果要沿用原来的内联onclick写法，按下面实现即可：

1. 生成a标签时给onclick传入当前元素上下文：

<a class="dropdown-item" href="#" onclick="selectColor(this)">Sky</a>

2. 写全局处理函数：

function selectColor(clickedItem) {
  // 清除所有标记
  document.querySelectorAll('.dropdown-item').forEach(item => {
    item.textContent = item.textContent.replace(/\s*\[current\]$/, '');
  });
  // 给当前项加标记
  clickedItem.textContent += ' [current]';
  // 自定义颜色切换逻辑
}

优化建议 #

如果后续需要给[current]加特殊样式（比如高亮、缩小字号、换灰色），可以把标识单独包成一个内联标签，通过增删标签、切换class的方式控制显示隐藏，比纯文本处理更稳定灵活：

<a class="dropdown-item" href="#">Sky<span class="current-mark" style="color:#999;font-size:0.9em;margin-left:4px;display:none">[current]</span></a>

内容的提问来源于stack exchange，提问作者ChimmFX