javascript - 使javascript按钮隐藏或显示内容切换

Question

我有两个按钮和两个包含不同信息的隐藏 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功能。