2

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

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

4

2 回答 2

4

如果您想要切换功能，只需将显示从“”更改为“无”并返回：

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库，它的切换功能。

于 2012-08-17T14:14:01.837 回答
0

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

于 2012-08-17T14:13:47.847 回答