Bootstrap标签面板加载动画异常：仅首个面板正常，后续透明度失效

核心问题 #

你的代码里用了document.querySelector(".tab-pane")和document.querySelector(".lds-dual-ring")，这两个方法只会返回页面中第一个匹配的元素。所以不管点击哪个标签，你始终在操作第一个标签面板和第一个双环图标，后续面板的元素根本没被选中，自然透明度效果不会生效。

修复后的代码 #

const tabs = [...document.querySelectorAll('[data-bs-toggle="tab"]')];

for (let tab of tabs) {
  tab.addEventListener("click", () => {
    // 获取当前标签对应的目标面板
    const targetPaneSelector = tab.getAttribute('data-bs-target');
    const targetPane = document.querySelector(targetPaneSelector);
    // 在目标面板内找到对应的双环加载图标
    const dualRing = targetPane.querySelector(".lds-dual-ring");
    
    // 添加加载状态类
    targetPane.classList.add("loading");
    dualRing.classList.add("loading");
    
    setTimeout(() => {
      // 移除加载状态类
      targetPane.classList.remove("loading");
      dualRing.classList.remove("loading");
    }, 500);
  });
}

关键修改点 #

• 不再全局获取面板和图标，而是在点击事件中，根据当前标签的data-bs-target属性，定位到对应的目标面板
• 从目标面板内部查找该面板专属的lds-dual-ring元素，确保操作的是当前标签对应的元素
• 移除了冗余的tab &&判断，因为querySelectorAll返回的元素都是有效的DOM节点

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