如何隱藏元素並在點擊時顯示新元素？

我有三個圖片，點擊後會顯示一個包含文字的隱藏元素。但是，我想確保其他兩個隱藏元素在顯示時隱藏。因此，如果我點擊＃img2，則會顯示＃text2，但＃text1和＃text3將被隱藏。另外，這可能只是一個語法錯誤，但是當我試圖將所有代碼放在腳本標記下時，它將無法正常工作。我也喜歡將所有的jquery放在腳本標籤中，而不是使用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>

來源

2012-09-18 RMi Flores

接受某些問題的答案。 – 0x499602D2

請使用jquery綁定，當你使用jquery插件時。 –

它是一個很好的做法，讓您的代碼unobstrusive

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();   
    }); 
})

DEMO

來源

2012-09-18 18:31:15

<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>

來源

2012-09-18 18:21:39

你可以嘗試這樣的事情：

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/

來源

2012-09-18 18:26:24 davidbuzatto

http://jsfiddle.net/uptVT/

<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>

來源

2012-09-18 18:31:29 Nick

如何隱藏元素並在點擊時顯示新元素？

回答

相關問題