我有这个我试图操纵的小 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>
我想弄清楚的是如何一次只显示一条消息。因此，在您单击其中一个答案之前，什么都没有，但如果您单击一个，则会显示消息。但是，如果您单击另一个它会消失，并且您单击的那个消息会出现。我希望这不会令人困惑。
谁能帮我吗？