Javascript 基于onclick的只有一个打开的隐藏

我有一个小javascript代码，我正试图操纵它：

<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>

我正试图用它做的是提出一个小问题，多个答案，并显示一条消息，每次点击

因此，我构建了以下代码：

<table class="hovertable">
<tr class="hovertable">
<td colspan="4" class="deep">What is the Generic Name of this Medication?</td>
</tr>
<tr onclick="javascript:ReverseDisplay('question1a');">
<td class="age">A.</td><td colspan="3" class="notes" onmouseover="this.style.backgroundColor='#ffba74';" onmouseout="this.style.backgroundColor='#FFFFFF';">
Lovastatin.</td>
</tr>
<tr onclick="javascript:ReverseDisplay('question1b');">
<td class="age">B.</td><td colspan="3" class="notes" onmouseover="this.style.backgroundColor='#ffba74';" onmouseout="this.style.backgroundColor='#FFFFFF';">
Atorvastatin.</td>
</tr>
<tr onclick="javascript:ReverseDisplay('question1c');">
<td class="age">C.</td><td colspan="3" class="notes" onmouseover="this.style.backgroundColor='#ffba74';" onmouseout="this.style.backgroundColor='#FFFFFF';">
Simvastatin.</td>
 </tr>
 <tr onclick="javascript:ReverseDisplay('question1d');">
<td class="age">D.</td><td colspan="3" class="notes" onmouseover="this.style.backgroundColor='#ffba74';" onmouseout="this.style.backgroundColor='#FFFFFF';">
Pravastatin</td>
 </tr>
 </table>

这种药物的通用名称是什么？
A.
洛伐他汀。
B
阿托伐他汀。
C
辛伐他汀。
D
普伐他汀

下面是显示信息的部分

<div id="question1a" style="display:none;">
<table class="hovertable">
<tr>
<td class="age">Answer</td><td colspan="3" class="notes" onmouseover="this.style.backgroundColor='#ffba74';" onmouseout="this.style.backgroundColor='#FFFFFF';">
This is Correct.</td>
</tr>
</table></div>
<div id="question1b" style="display:none;">
<table class="hovertable">
<tr>
<td class="age">Answer</td><td colspan="3" class="notes" onmouseover="this.style.backgroundColor='#ffba74';" onmouseout="this.style.backgroundColor='#FFFFFF';">
This is Not Correct</td>
</tr>
</table></div>
<div id="question1c" style="display:none;">
<table class="hovertable">
<tr>
<td class="age">Answer</td><td colspan="3" class="notes" onmouseover="this.style.backgroundColor='#ffba74';" onmouseout="this.style.backgroundColor='#FFFFFF';">
This is Not Correct</td>
</tr>
</table></div>
<div id="question1d" style="display:none;">
<table class="hovertable">
<tr>
<td class="age">Answer</td><td colspan="3" class="notes" onmouseover="this.style.backgroundColor='#ffba74';" onmouseout="this.style.backgroundColor='#FFFFFF';">
This is Not Correct</td>
</tr>
</table></div>

答复
这是正确的。
答复
这是不对的
答复
这是不对的
答复
这是不对的

我想弄明白的是如何一次只显示一条消息。因此，在您单击其中一个答案之前，没有任何内容，但如果您单击其中一个，则会显示消息。但是，如果您单击另一个按钮，它将消失，并显示您单击的按钮的消息。我希望这不会令人困惑

---

有人能帮我吗？

你最好用jQuery之类的东西来处理DOM

它会像

$("#question1").show().siblings().hide();

---

除其他外，我将调查此事。谢谢。我一弄明白，就接受。哈哈。我对jquery一无所知。它是左边的向上和向下投票按钮下的复选框。。。谢谢：）啊，jQuery确实是您应该学习的Javascript框架。它使与DOM（浏览器中呈现的HTML元素）的交互变得非常简单，并包括CSS选择器、AJAX、事件和DOM操作。它也适用于所有浏览器。过来看！