[英]How to hide an element and show a new element on click?
我有三個圖像,當單擊它們時,將顯示一個包含文本的隱藏元素。 但是,我想確保在顯示一個元素時其他2個隱藏元素被隱藏。 因此,如果我單擊#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>
保持代碼簡潔的好習慣
的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();
});
})
<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>
您可以嘗試如下操作:
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/
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.