JavaScript 实现按钮切换显示不同 Div 内容

JavaScript 实现按钮切换显示不同 Div 内容

使用 JavaScript 可以轻松实现点击不同按钮显示不同 Div 内容。以下是实现步骤和示例代码：

1. HTML 结构

首先，在 HTML 中创建多个按钮和对应的 Div 元素，并为每个按钮和 Div 设置唯一的 ID。

<button id='btn1'>按钮1</button>
<button id='btn2'>按钮2</button>
<button id='btn3'>按钮3</button>

<div id='div1' style='display:none;'>内容1</div>
<div id='div2' style='display:none;'>内容2</div>
<div id='div3' style='display:none;'>内容3</div>

2. JavaScript 代码

在 JavaScript 中，获取所有按钮和 Div 元素，并为每个按钮添加点击事件监听器。在监听器中，获取当前点击的按钮的 ID，并根据 ID 显示对应的 Div，同时隐藏其他 Div 元素。

// 获取所有按钮和 Div 元素
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');

// 为每个按钮添加点击事件监听器
btn1.addEventListener('click', function() {
  // 显示 div1，同时隐藏其他 Div
  div1.style.display = 'block';
  div2.style.display = 'none';
  div3.style.display = 'none';
});

btn2.addEventListener('click', function() {
  // 显示 div2，同时隐藏其他 Div
  div1.style.display = 'none';
  div2.style.display = 'block';
  div3.style.display = 'none';
});

btn3.addEventListener('click', function() {
  // 显示 div3，同时隐藏其他 Div
  div1.style.display = 'none';
  div2.style.display = 'none';
  div3.style.display = 'block';
});

总结

通过以上步骤，我们就可以实现点击不同按钮显示不同 Div 内容的功能。这是一种常见的 JavaScript 交互方式，可以应用于各种 Web 应用场景。