使用按钮在两个 div 之间切换

Question

基本上我的 HTML 页面上有 2 个 div，我正在尝试使用 HTML 上的按钮创建一个在两者之间切换的功能。一个按钮将切换到 div 2，另一个按钮将切换回 div 1，就像下面的代码一样：

<button id="toggle-to-2">Toggle to div 2</button>
<button id="toggle-to-1">Toggle to div 1</button>

<div id="div-1">
This is div 1
</div>

<div id="div2">
This is div 2
</div>

另外，在使用CSS时，我应该如何定位它们？我应该给他们相同的位置，并依靠函数在两者之间切换吗？

Answer 1

这有点原始，但它可以做你想做的事，我已经尽力实现这种切换行为的最佳策略，与 React 之类的东西相比，这在 vanilla JS 中很乏味。

const toggleTo2 = document.getElementById("toggle-to-2");
const toggleTo1 = document.getElementById("toggle-to-1");

const div1 = document.getElementById("div-1");
const div2 = document.getElementById("div2");

const hide = el => el.style.setProperty("display", "none");
const show = el => el.style.setProperty("display", "block");

hide(div2);
hide(toggleTo1);

toggleTo2.addEventListener("click", () => {
  hide(div1);
  hide(toggleTo2);
  show(toggleTo1);
  show(div2);
});

toggleTo1.addEventListener("click", () => {
  hide(div2);
  hide(toggleTo1);
  show(toggleTo2);
  show(div1);
});

<button id="toggle-to-2">Toggle to div 2</button>
<button id="toggle-to-1">Toggle to div 1</button>

<div id="div-1">
This is div 1
</div>

<div id="div2">
This is div 2
</div>

至于 CSS，这取决于你，但如果他们切换，我会假设你给他们相同的定位。

使用按钮在两个 div 之间切换

Toggle between two divs using a button

javascript

html

css

button

toggle