如何在两个按钮之间切换

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

<script>
  var button1 = document.getElementById("button1");
  var button2 = document.getElementById("button2");

  button1.addEventListener("click", function() {
    button1.classList.add("active");
    button2.classList.remove("active");
  });

  button2.addEventListener("click", function() {
    button1.classList.remove("active");
    button2.classList.add("active");
  });
</script>

<style>
  .active {
    background-color: blue;
    color: white;
  }
</style>

<button id="button1" style="display: block;">按钮1</button>
<button id="button2" style="display: none;">按钮2</button>

<script>
  var button1 = document.getElementById("button1");
  var button2 = document.getElementById("button2");

  button1.addEventListener("click", function() {
    button1.style.display = "none";
    button2.style.display = "block";
  });

  button2.addEventListener("click", function() {
    button1.style.display = "block";
    button2.style.display = "none";
  });
</script>

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

<script>
  var button1 = document.getElementById("button1");
  var button2 = document.getElementById("button2");
  var activeButton = button1;

  button1.addEventListener("click", function() {
    activeButton = button1;
    updateButtonState();
  });

  button2.addEventListener("click", function() {
    activeButton = button2;
    updateButtonState();
  });

  function updateButtonState() {
    button1.classList.remove("active");
    button2.classList.remove("active");
    activeButton.classList.add("active");
  }
</script>

<style>
  .active {
    background-color: blue;
    color: white;
  }
</style>