如何使用按钮切换多个视图

<button id="view1Button">View 1</button>
<button id="view2Button">View 2</button>

<div id="view1">
  <h1>View 1</h1>
  <!-- View 1 的内容 -->
</div>

<div id="view2">
  <h1>View 2</h1>
  <!-- View 2 的内容 -->
</div>

// 获取按钮和视图的 DOM 元素
var view1Button = document.getElementById("view1Button");
var view2Button = document.getElementById("view2Button");
var view1 = document.getElementById("view1");
var view2 = document.getElementById("view2");

// 初始状态下显示第一个视图，隐藏第二个视图
view1.style.display = "block";
view2.style.display = "none";

// 添加按钮的点击事件监听
view1Button.addEventListener("click", function() {
  // 切换到第一个视图
  view1.style.display = "block";
  view2.style.display = "none";
});

view2Button.addEventListener("click", function() {
  // 切换到第二个视图
  view1.style.display = "none";
  view2.style.display = "block";
});