如何通过两个按钮正确切换cards和table两个元素的显示状态？

问题原因 #

你的代码多了多余的状态判断，反而导致逻辑和需求不符：

• 点击对应按钮时，你先判断对应元素当前是否显示，如果显示就直接隐藏，这就会触发重复点击同一按钮时元素被错误关闭的问题
• 初始状态下cards默认显示，此时点击cards按钮会直接命中targetCards.style.display !== "none"的判断，直接把cards隐藏，不符合需求

修复方案 #

需求的核心是「点击哪个按钮就固定显示哪个元素，隐藏另一个」，不需要额外判断当前状态，直接赋值即可，逻辑更简单也不会出错：

const targetTable = document.getElementById("table");
const targetCards = document.getElementById("cards");
const btnTable = document.getElementById("toggle"); // table按钮
const btnCards = document.getElementById("toggle2"); // cards按钮

// 初始状态：cards显示，table隐藏
targetCards.style.display = "block";
targetTable.style.display = "none";

// 点击table按钮：显示table，隐藏cards
btnTable.onclick = function () {
  targetTable.style.display = "block";
  targetCards.style.display = "none";
};

// 点击cards按钮：显示cards，隐藏table
btnCards.onclick = function () {
  targetCards.style.display = "block";
  targetTable.style.display = "none";
};

对应的HTML代码不需要做任何修改即可正常运行。

如果后续要扩展其他逻辑、需要保留判断分支，可以修改判断条件：仅当对应元素当前为隐藏状态时才执行切换，否则不做任何操作：

btnTable.onclick = function () {
  // 只有table当前隐藏的时候才执行切换
  if (targetTable.style.display === "none") {
    targetTable.style.display = "block";
    targetCards.style.display = "none";
  }
};

btnCards.onclick = function () {
  // 只有cards当前隐藏的时候才执行切换
  if (targetCards.style.display === "none") {
    targetCards.style.display = "block";
    targetTable.style.display = "none";
  }
};

内容的提问来源于stack exchange，提问作者StephenW