基于onclick的隐藏，只打开一个

Question

我有这个小 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>

这里是显示消息的部分。

<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>

我想弄清楚的是如何一次只显示一条消息。因此，在您单击其中一个答案之前，什么都没有，但如果您单击一个，则会显示消息。但是，如果您单击另一个它会消失，并且您单击的那个消息会出现。我希望这不会令人困惑。

谁能帮帮我？

Answer 1

你最好用 jQuery 之类的东西来做 DOM 操作。

它会像这样工作

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

见http://api.jquery.com/siblings/