无需在HTML写onclick属性，如何实现点击DIV切换对应段落内容

方案1：JavaScript实现（推荐） #

仅需做两处修改，完全不需要在HTML中添加onclick属性，符合主题限制要求：

1. 调整HTML，给span的父容器加专属类名，避免影响页面其他元素：

// 对应各个按钮的div如下
<div class="tab-wrapper">
  <span>Div 1</span>
  <span>Div 2</span>
  <span>Div 3</span>
  <span>Div 4</span>
</div>
   
<p id="paragraph_1">paragraph 1</p>
<p id="paragraph_2" class="none">paragraph 2</p>
<p id="paragraph_3" class="none">paragraph 3</p>
<p id="paragraph_4" class="none">paragraph 4</p>
</body>

2. 在现有JS代码后追加事件绑定逻辑：

document.addEventListener('DOMContentLoaded', () => {
  // 获取所有tab按钮
  const tabBtns = document.querySelectorAll('.tab-wrapper span');
  tabBtns.forEach((btn, idx) => {
    // 索引从0开始，对应段落序号从1开始
    const targetNum = idx + 1;
    btn.addEventListener('click', () => {
      // 直接调用你已写好的切换函数
      changeElement(targetNum);
      // 可选：添加按钮激活状态样式
      tabBtns.forEach(b => b.style.background = 'green');
      btn.style.background = '#006400';
    });
  });
});

原有CSS代码无需修改即可正常运行。

方案2：纯CSS实现（无需写JS） #

如果不想使用JS，可通过CSS :target 伪类实现切换，调整代码如下：

1. 修改HTML结构，给span套上指向对应段落ID的a标签：

// 对应各个按钮的div如下
<div class="tab-wrapper">
  <a href="#paragraph_1"><span>Div 1</span></a>
  <a href="#paragraph_2"><span>Div 2</span></a>
  <a href="#paragraph_3"><span>Div 3</span></a>
  <a href="#paragraph_4"><span>Div 4</span></a>
</div>
   
<p id="paragraph_1">paragraph 1</p>
<p id="paragraph_2">paragraph 2</p>
<p id="paragraph_3">paragraph 3</p>
<p id="paragraph_4">paragraph 4</p>
</body>

2. 替换原有CSS代码：

body {
  width: 100%;
}

.tab-wrapper {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-items: center;
}

.tab-wrapper a {
  text-decoration: none;
}

span {
  height: 50px;
  width: 50px;
  background-color: green;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 切换逻辑 */
p {
  display: none;
}
p:first-of-type {
  display: block;
}
p:target {
  display: block;
}

该方案缺点是点击后页面URL会带上对应段落的锚点后缀，无其他功能问题。

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