Javascript 如何隐藏元素并在单击时显示新元素?
我有三个图像,单击它们时,会显示一个包含文本的隐藏元素。但是,我想确保在显示一个隐藏元素时,其他两个隐藏元素都是隐藏的。因此,如果我单击#img2,那么#text2将显示,但#text1和#text3将隐藏。此外,这可能只是一个语法错误,但当我试图将所有代码放在script标记下时,它无法正常工作。我还希望将所有jquery放在脚本标记中,而不是在HTML中使用onclick特性。我对jquery非常陌生,因此非常感谢您的帮助。提前谢谢Javascript 如何隐藏元素并在单击时显示新元素?,javascript,jquery,html,css,fadein,Javascript,Jquery,Html,Css,Fadein,我有三个图像,单击它们时,会显示一个包含文本的隐藏元素。但是,我想确保在显示一个隐藏元素时,其他两个隐藏元素都是隐藏的。因此,如果我单击#img2,那么#text2将显示,但#text1和#text3将隐藏。此外,这可能只是一个语法错误,但当我试图将所有代码放在script标记下时,它无法正常工作。我还希望将所有jquery放在脚本标记中,而不是在HTML中使用onclick特性。我对jquery非常陌生,因此非常感谢您的帮助。提前谢谢 <div id = "img1" onclick =
<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>
/*TODO:在此处单击所有代码*/
您可以尝试以下方法: 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>
$(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" );
});
});
可以在这里找到一个实例:保持代码不结构化是一个很好的做法 HTML jQuery
$(function(){
$("div.img").on("click", function(){
var id = $(this).attr("id").substr(-1);
$(".hidden").hide();
$("#text"+id).show();
});
})
img1
img2
img3
文本1
文本2
文本3
/*TODO:在此处单击所有代码*/
接受您的问题的一些答案。如果您已经在使用jquery插件,请使用jquery绑定。
<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>
.hidden{display:none}
$(function(){
$("div.img").on("click", function(){
var id = $(this).attr("id").substr(-1);
$(".hidden").hide();
$("#text"+id).show();
});
})
<div id = "img1" onclick = "$('.text').hide();$('#text1').show();">img1</div>
<div id = "img2" onclick = "$('.text').hide();$('#text2').show();">img2</div>
<div id = "img3" onclick = "$('.text').hide();$('#text3').show();">img3</div>
<div id="text1" class = "text" hidden>text1</div>
<div id="text2" class = "text" hidden>text2</div>
<div id="text3" class = "text" hidden>text3</div>
<script>
/* TODO: Put all on-click code here */
</script>