javascript - 制作javascript按钮来隐藏或显示内容切换

Question

我有两个按钮和两个包含不同信息的隐藏 div。我正在尝试弄清楚如何在单击一个按钮时显示内容(我已经设法使其工作正常)，然后如果单击另一个按钮，旧的 div 会再次隐藏，新的 div 将打开。

本质上:

点击此处查看内容A!单击此处查看内容 B!

当用户点击内容A时，会出现内容A。 当用户再次点击内容A时，内容A消失。

当用户点击内容B时，会出现内容B。

用户也可以切换。例如，打开内容 A div，单击内容 B 按钮，然后加载内容 B，但内容 A 自行关闭。

这是我正在使用的 JS:

function ShowDiv() {
document.getElementById("myDiv").style.display = "";
}

function ShowDiv2() {
    document.getElementById("myDiv2").style.display = "";
    }

HTML

<input type="button" name="answer" onclick="ShowDiv()" />
<input type="button" name="answer2" onclick="ShowDiv2()" />

<div id="myDiv" style="display: none;">Hi I'm content a!</div>
<div id="myDiv2" style="display: none;">Hi I'm content B!</div>

目前，两个按钮都正确显示内容，但当您尝试单击另一个按钮时，什么也没有发生。

Answer 1

如果您想要切换功能，只需将显示从“”更改为“无”然后再返回即可:

function ShowDiv() {
    document.getElementById("myDiv").style.display = "";
    document.getElementById("myDiv2").style.display = "none";
}

function ShowDiv2() {
    document.getElementById("myDiv2").style.display = "";
    document.getElementById("myDiv").style.display = "none";
}

尽管我强烈建议使用 jquery图书馆，它是 toggle功能。