如何用JavaScript点击Click me时切换两个span的active类名

实现逻辑 #

• 定位触发点击的目标元素：class包含click、文本内容为「Click me」的元素
• 为该元素绑定点击事件回调
• 回调中定位class为subtab的div容器，获取其下的span子元素集合
• 移除第一个span的active类，为第二个span添加active类

前置注意 #

你提供的原始HTML中，触发按钮的闭合标签存在书写错误，<span/>不是合法的span闭合写法，需要修正为</span>，否则DOM结构解析会出现异常。

完整代码示例 #

HTML结构 #

<span class="click">Click me</span>

<div class="subtab">
  <span class="first active" data-tabname="reviews" tabindex="0">Reviews</span>
  <span class="first" data-tabname="questions" tabindex="0">Questions </span>
</div>

JavaScript代码 #

// 精准匹配文本选中触发元素，避免页面存在多个同class元素时选错
const triggerEl = Array.from(document.querySelectorAll('.click'))
  .find(item => item.textContent.trim() === 'Click me');

const subtabEl = document.querySelector('.subtab');

// 元素存在时才绑定事件，避免JS报错
if (triggerEl && subtabEl) {
  const tabItems = subtabEl.querySelectorAll('span');
  triggerEl.addEventListener('click', () => {
    // 长度判断避免索引越界
    if (tabItems.length < 2) return;
    tabItems[0].classList.remove('active');
    tabItems[1].classList.add('active');
  });
}

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