单击按钮时显示div框

时间:2017-05-23 14:43:47

标签: jquery button

仍然在这里围绕代码。我希望能够在点击问题时显示一系列“答案”。问题是按钮,答案是div。我们将非常感激地提供任何帮助。

<h4 class="JCU-title">
<button  onclick="javascript:showDiv(answer1);">The</button>
<button  onclick="javascript:showDiv(answer2);">girl</button>
<button  onclick="javascript:showDiv(answer3);">plays</button>
<button  onclick="javascript:showDiv(answer4);">soccer</button>
</h4>

<!--show (toggle?) only one answer div box at a time-->
<div id="answer0">blank</div>
<div id="answer1">the is a determiner</div>
<div id="answer2">girl is a common noun </div>
<div id="answer3">play is a verb.</div>
<div id="answer4">Soccer common noun.</div>

1 个答案:

答案 0 :(得分:1)

function showDiv(id){ 
  $(".answer").hide();
  $("#"+id).show();
}
.answer{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h4 class="JCU-title">
<button  onclick="showDiv('answer1');">The</button>
<button  onclick="showDiv('answer2');">girl</button>
<button  onclick="showDiv('answer3');">plays</button>
<button  onclick="showDiv('answer4');">soccer</button>
</h4>

<!--show (toggle?) only one answer div box at a time-->
<div id="answer0" class="answer">blank</div>
<div id="answer1" class="answer">the is a determiner</div>
<div id="answer2" class="answer">girl is a common noun </div>
<div id="answer3" class="answer">play is a verb.</div>
<div id="answer4" class="answer">Soccer common noun.</div>