如何在原生JavaScript中不使用ID实现内容切换器（基础轮播）

先补充必要的CSS样式 #

确保display-none类生效，同时给切换按钮添加交互样式提升用户体验：

.display-none {
  display: none;
}

/* 切换按钮的交互样式 */
.hero-switch {
  cursor: pointer;
}
.hero-switch.active img {
  opacity: 1;
}
.hero-switch img {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

JavaScript解决方案 #

核心思路是利用元素索引的对应关系，通过forEach批量处理按钮和内容，无需给每个元素单独设置ID：

// 获取页面上的所有相关元素
const switchButtons = document.querySelectorAll('.hero-switch');
const titles = document.querySelectorAll('.slider-title');
const paragraphs = document.querySelectorAll('.slider-lead');
const sliderContainer = document.querySelector('.slider');

// 定义每组内容对应的背景图（替换成你自己的图片地址）
const bgImages = [
  'https://source.unsplash.com/random/1200x600?nature',
  'https://source.unsplash.com/random/1200x600?city',
  'https://source.unsplash.com/random/1200x600?tech'
];

// 遍历每个切换按钮，绑定点击事件
switchButtons.forEach((button, index) => {
  button.addEventListener('click', () => {
    // 1. 隐藏所有标题和段落
    titles.forEach(title => title.classList.add('display-none'));
    paragraphs.forEach(para => para.classList.add('display-none'));
    
    // 2. 显示当前索引对应的标题和段落
    titles[index].classList.remove('display-none');
    paragraphs[index].classList.remove('display-none');
    
    // 3. 更新Hero区域的背景图
    sliderContainer.style.backgroundImage = `url(${bgImages[index]})`;
    
    // 4. 更新按钮的激活状态（可选，让用户清楚当前选中项）
    switchButtons.forEach(btn => btn.classList.remove('active'));
    button.classList.add('active');
  });
});

代码说明 #

1. 元素获取：用querySelectorAll一次性获取所有同类元素，避免重复编写选择器代码。
2. forEach遍历：遍历按钮时，第二个参数index代表当前按钮的位置（从0开始），刚好和标题、段落、背景图的索引一一对应，完美匹配切换逻辑。
3. 内容切换逻辑：点击按钮时先统一隐藏所有内容，再显示对应索引的目标内容，同时更新背景图。
4. 激活状态：给当前点击的按钮添加active类，通过CSS改变圆点透明度，让用户直观看到当前选中的切换项。

注意事项 #

• 确保bgImages数组的长度和按钮、内容组的数量完全一致，避免出现索引越界错误。
• 如果你的背景图是固定资源，直接替换数组里的地址即可。
• 若需要切换动画（比如淡入淡出），只需在CSS中给标题、段落添加transition过渡属性即可。

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