如何点击Tab时为dropdown-trigger添加active类实现箭头切换

核心思路 #

不用额外给tab-button新增事件监听器，直接在已有的Tab切换逻辑里同步处理箭头的active类切换即可，既避免重复绑定事件，也能保证Tab切换和箭头状态完全联动。

步骤1：修复HTML的ID重复问题 #

HTML里多个<a>标签用了相同的id="dropdown-trigger"，ID必须唯一，改成类名：

<!-- 每个button内的a标签都修改 -->
<a href="#" class="dropdown-trigger">
  <span class="caret-dropdown"></span>
</a>

步骤2：修改JS选择器 #

将箭头的选择器从ID改为类名，确保能选中所有箭头元素：

// 替换原来的caretDropdown定义
const caretDropdown = document.querySelectorAll(".dropdown-trigger .caret-dropdown");

步骤3：在Tab切换逻辑中添加箭头状态处理 #

在现有的Tab切换事件回调里，加入同步箭头状态的代码：

tabs &&
  tabs.addEventListener("click", (e) => {
    const button = e.target.closest("button");
    if (!button) return;

    contents.forEach((content) => content.classList.remove("active"));
    tabButton.forEach((btn) => btn.classList.remove("active"));

    button.classList.add("active");
    const element = document.getElementById(button.dataset.id);
    element.classList.add("active");

    // --- 新增：同步箭头的active状态 ---
    caretDropdown.forEach((dropdown) => dropdown.classList.remove("active"));
    const currentCaret = button.querySelector(".caret-dropdown");
    if (currentCaret) {
      currentCaret.classList.add("active");
    }
  });

步骤4：可选：简化冗余代码 #

因为点击箭头会触发事件冒泡到button，已经能触发Tab切换和箭头状态更新，所以原来的handleClick函数可以直接删除，避免重复逻辑。

最终效果 #

现在点击整个Tab按钮（包括图片、文字、箭头区域），都会同步切换Tab内容和箭头的上下状态，完全符合需求。

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