如何在不同的点击中显示和隐藏多个不同的元素？

<button id="button1">按钮1</button>
<button id="button2">按钮2</button>
<button id="button3">按钮3</button>

<div id="element1" class="hidden">元素1</div>
<div id="element2" class="hidden">元素2</div>
<div id="element3" class="hidden">元素3</div>

.hidden {
  display: none;
}

// 获取按钮和元素的引用
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");

var element1 = document.getElementById("element1");
var element2 = document.getElementById("element2");
var element3 = document.getElementById("element3");

// 添加点击事件监听器
button1.addEventListener("click", function() {
  // 切换元素1的显示状态
  element1.classList.toggle("hidden");
});

button2.addEventListener("click", function() {
  // 切换元素2的显示状态
  element2.classList.toggle("hidden");
});

button3.addEventListener("click", function() {
  // 切换元素3的显示状态
  element3.classList.toggle("hidden");
});