如何根据按下的按钮呈现不同的小部件

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

<div id="widget1" class="widget">小部件1</div>
<div id="widget2" class="widget">小部件2</div>

.widget {
  display: none;
}

// 获取按钮和小部件的引用
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var widget1 = document.getElementById("widget1");
var widget2 = document.getElementById("widget2");

// 监听按钮点击事件
button1.addEventListener("click", function() {
  // 显示小部件1，隐藏小部件2
  widget1.style.display = "block";
  widget2.style.display = "none";
});

button2.addEventListener("click", function() {
  // 显示小部件2，隐藏小部件1
  widget1.style.display = "none";
  widget2.style.display = "block";
});