这有点原始,但它做了你想做的事情,我已经尽了最大努力来实现这种切换行为的最佳策略,这在vanilla JS中与React之类的东西相比是乏味的。
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,这取决于你,但如果他们切换,我会假设你给他们相同的定位。
