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/

基于onclick隐藏只有一个打开

1 个答案: