如何隐藏元素并在单击时显示新元素？
如何隐藏元素并在单击时显示新元素？
提问于 2012-09-19 02:15:57
我有三个图像，当单击它们时，会显示一个包含文本的隐藏元素。但是，我想确保当我显示一个元素时，其他两个隐藏元素是隐藏的。因此，如果我点击#img2，那么#text2将被显示，但#text1和#text3将被隐藏。此外，这可能只是一个语法错误，但当我试图将所有代码放在script标记下时，它将无法正常工作。我也喜欢把所有的jquery放在script标记中，而不是使用HTML中的onclick特性。我对jquery非常陌生，所以非常感谢大家的帮助。提前感谢！
<div id = "img1" onclick = "$('#text1').fadeIn(500)"></div>
<div id = "img2" onclick = "$('#text2').fadeIn(500)"></div>
<div id = "img3" onclick = "$('#text3').fadeIn(500)"></div>
<div id = "text1" hidden></div>
<div id = "text2" hidden></div>
<div id = "text3" hidden></div>
<script>
/* TODO: Put all on-click code here */
</script>回答 4
Stack Overflow用户
回答已采纳
发布于 2012-09-19 02:31:16
保持代码不混乱是一种很好的做法
HTML
<div id = "img1" class="img">One</div>
<div id = "img2" class="img">Two</div>
<div id = "img3" class="img">Three</div>
<div id = "text1" class="hidden">One</div>
<div id = "text2" class="hidden">Two</div>
<div id = "text3" class="hidden">Three</div>CSS
.hidden{display:none}jQuery
$(function(){
$("div.img").on("click", function(){
var id = $(this).attr("id").substr(-1);
$(".hidden").hide();
$("#text"+id).show();
});
})Stack Overflow用户
发布于 2012-09-19 02:21:39
<div id = "img1" onclick = "$('.effect').hide();$('#text1').show()"></div>
<div id = "img2" onclick = "$('.effect').hide();$('#text2').show()"></div>
<div id = "img3" onclick = "$('.effect').hide();$('#text3').show()"></div>
<div id = "text1" class="effect" hidden></div>
<div id = "text2" class="effect" hidden></div>
<div id = "text3" class="effect" hidden></div>Stack Overflow用户
发布于 2012-09-19 02:26:24
您可以尝试如下所示：
HTML：
<div id="div1">One</div>
<div id="div2">Two</div>
<div id="div3">Three</div>
<div id="texts">
<div id="txt1">Text One</div>
<div id="txt2">Text Two</div>
<div id="txt3">Text Three</div>
</div>JavaScript:
$(function(){
// hide every text div (all texts children)
$( "#texts" ).children().hide();
// this function hides every text child and than
// fades in the desired one
function hideAndShow( toShowSel ) {
$( "#texts" ).children().hide();
$( toShowSel ).fadeIn();
}
// registering the click event for the divs...
$( "#div1" ).click( function(){
hideAndShow( "#txt1" );
});
$( "#div2" ).click( function(){
hideAndShow( "#txt2" );
});
$( "#div3" ).click( function(){
hideAndShow( "#txt3" );
});
});这里有一个活生生的例子：http://jsfiddle.net/davidbuzatto/FztUN/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12482675
复制相关文章
相似问题
腾讯云开发者
