需求：实现点击对应按钮切换显示单个div的JavaScript函数

首先注意：原HTML中class以数字开头（class="1"）不符合HTML规范，建议修改为合法类名，同时给每个内容Div添加data-index属性对应按钮序号，修正后的HTML结构如下：

<div class="toggle-container">
    <div class="content-item" data-index="1">1</div>
    <div class="content-item" data-index="2">2</div>
    <div class="content-item" data-index="3">3</div>
    <div class="content-item" data-index="4">4</div>
    <div class="content-item" data-index="5">5</div>
</div>
<div class="switch-container">
  <button class="switch" data-index="1">1</button>
  <button class="switch" data-index="2">2</button>
  <button class="switch" data-index="3">3</button>
  <button class="switch" data-index="4">4</button>
  <button class="switch" data-index="5">5</button>
</div>

步骤1：添加基础CSS #

默认隐藏所有内容Div，可选默认显示第一个内容：

.content-item {
    display: none;
}
/* 可选：初始显示第一个内容 */
.content-item[data-index="1"] {
    display: block;
}

步骤2：编写JavaScript逻辑 #

方案1：直接绑定按钮事件 #

给每个按钮单独绑定点击事件，实现切换：

const buttons = document.querySelectorAll('.switch');
const contentItems = document.querySelectorAll('.content-item');

buttons.forEach(button => {
    button.addEventListener('click', () => {
        const targetIndex = button.getAttribute('data-index');
        
        // 隐藏所有内容
        contentItems.forEach(item => item.style.display = 'none');
        // 显示对应索引的内容
        document.querySelector(`.content-item[data-index="${targetIndex}"]`).style.display = 'block';
    });
});

方案2：事件委托（更高效） #

仅给按钮父容器绑定一次事件，适合按钮数量较多的场景：

const buttonContainer = document.querySelector('.switch-container');
const contentItems = document.querySelectorAll('.content-item');

buttonContainer.addEventListener('click', (e) => {
    if (e.target.classList.contains('switch')) {
        const targetIndex = e.target.getAttribute('data-index');
        
        contentItems.forEach(item => item.style.display = 'none');
        document.querySelector(`.content-item[data-index="${targetIndex}"]`).style.display = 'block';
    }
});

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