基本上我有 6 个按钮和 6 个段落(每个按钮与特定段落相关)。我想在单击某个按钮时显示一段文本,然后在再次单击该按钮时隐藏该段。
我已经看过类似的问题,但似乎无法让它发挥作用。我认为这是因为我才刚刚开始尝试使用 jquery 并且并不真正理解这个问题。所有 hep 将不胜感激!谢谢!
html:
<div class="button"><div class="button float_l"><a href="#">More..</a></div>
<div class="button"><div class="button float_l"><a href="#">More..</a></div>
<div class="button"><div class="button float_l"><a href="#">More..</a></div>
<p><div id="text1">Paragraph 1</div></p>
<p><div id="text2">Paragraph 2</div></p>
<p><div id="text3">Paragraph 3</div></p>
JavaScript:
$(document).ready(function () {
$("#text1").hide();
$(".button").click(function(){
$("#text1").toggle();
$("#text2").hide();
$(".button").click(function(){
$("#text1").toggle();
});
第一个按钮应该与第一段相关,依此类推。我尝试使用“this”函数来关联特定按钮,但一定是使用不当,因为它不起作用。
最佳答案
首先,您必须识别不同的按钮,如果您使用“按钮”类,您将始终指代所有 3 个按钮。
此外,您不需要将 div 元素放在 p 元素中。
所以你可以这样做:
<div id="btn1" class="button"><a href="#">More..</a></div>
<div id="btn2" class="button"><a href="#">More..</a></div>
<div id="btn3" class="button"><a href="#">More..</a></div>
<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
<p id="p3">Paragraph 3</p>
然后,javascript:
$(document).ready(function () {
$("p").hide();
$("#btn1").click(function(){
$("#p1").toggle();
});
$("#btn2").click(function(){
$("#p2").toggle();
});
$("#btn2").click(function(){
$("#p2").toggle();
});
});
关于javascript - 使用 jquery 显示/隐藏文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24701915/