点击Next/Back按钮切换CSS横向标签页的jQuery实现求助

首先，我们通过跟踪当前激活标签的索引，结合通用切换函数来实现按钮控制的标签页切换逻辑：

$(document).ready(function() {
  // 获取所有标签项和对应内容面板
  const tabs = $('.tab');
  const tabContents = $('.tab-content');
  let currentIndex = 0;

  // 初始化激活第一个标签
  tabs.eq(currentIndex).addClass('active');
  tabContents.eq(currentIndex).addClass('active');

  // Next按钮点击事件
  $('#nextBtn').click(function() {
    // 循环切换：到达最后一个标签后回到第一个，若要停在最后则改为 currentIndex < tabs.length -1
    currentIndex = (currentIndex + 1) % tabs.length;
    switchTab(currentIndex);
  });

  // Back按钮点击事件
  $('#backBtn').click(function() {
    // 循环切换：到达第一个标签后跳转到最后一个，若要停在第一个则改为 currentIndex > 0
    currentIndex = (currentIndex - 1 + tabs.length) % tabs.length;
    switchTab(currentIndex);
  });

  // 封装标签切换逻辑
  function switchTab(index) {
    // 移除所有标签和内容的激活状态
    tabs.removeClass('active');
    tabContents.removeClass('active');
    // 激活目标索引的标签和内容
    tabs.eq(index).addClass('active');
    tabContents.eq(index).addClass('active');
  }
});

关键说明 #

• 用currentIndex变量记录当前激活位置，避免重复查找DOM元素，提升效率
• switchTab函数统一处理状态切换，减少重复代码，便于后续维护
• 索引采用取模运算实现循环切换，若不需要循环，修改索引判断逻辑即可（比如Next按钮只在currentIndex < tabs.length -1时更新索引）
• 确保HTML中标签项带.tab类、内容面板带.tab-content类，按钮ID为nextBtn和backBtn，与代码选择器对应

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