Question

我有两个按钮和两个包含不同信息的隐藏div。我正在尝试找出如何在单击一个按钮时显示内容（我已设法使其工作正常）然后如果单击另一个按钮，则旧div再次隐藏并且新的按钮打开。 / p>

本质：

点击此处查看内容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功能。

Answer 2

尝试分配*.style.display = "none";

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

2 个答案: