页面滑动切换功能异常修复求助：重复点击当前标签仍触发滑动

核心解决思路 #

在触发滑动动画的逻辑前，添加当前标签状态校验：如果点击的标签已经处于激活状态，直接终止后续滑动代码执行，避免无效的滑动触发。

示例代码实现 #

假设你的基础HTML结构如下：

<div class="tab-switcher">
  <div class="tab-nav">
    <button class="tab-item active" data-tab="morning">Morning</button>
    <button class="tab-item" data-tab="evening">Evening</button>
  </div>
  <div class="content-slider">
    <div class="content-panel morning-panel">Morning 板块内容</div>
    <div class="content-panel evening-panel">Evening 板块内容</div>
  </div>
</div>

修复后的JavaScript代码：

// 初始化状态：记录当前激活的标签
let activeTab = 'morning';
const tabItems = document.querySelectorAll('.tab-item');
const contentSlider = document.querySelector('.content-slider');

tabItems.forEach(item => {
  item.addEventListener('click', () => {
    const targetTab = item.dataset.tab;
    
    // 关键判断：如果点击的是当前已激活的标签，直接退出
    if (targetTab === activeTab) return;
    
    // 更新标签激活样式
    tabItems.forEach(tab => tab.classList.remove('active'));
    item.classList.add('active');
    
    // 执行滑动动画（这里以translateX为例，根据你的实际实现调整）
    contentSlider.style.transform = targetTab === 'evening' ? 'translateX(-100%)' : 'translateX(0)';
    
    // 更新当前激活标签记录
    activeTab = targetTab;
  });
});

适配说明 #

如果你的滑动效果是通过CSS类切换（比如给滑块添加slide-to-evening类），只需要在添加/移除类之前加入状态判断即可：

// 替换滑动部分的代码
if (targetTab === 'evening') {
  contentSlider.classList.add('slide-to-evening');
  contentSlider.classList.remove('slide-to-morning');
} else {
  contentSlider.classList.add('slide-to-morning');
  contentSlider.classList.remove('slide-to-evening');
}

只要确保每次触发滑动前先校验当前标签状态，就能彻底解决重复点击同一标签仍触发滑动的问题。

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