javascript - 如何隐藏元素并在单击时显示新元素？

Question

我有三个图像，单击它们时会显示一个包含文本的隐藏元素。但是，我想确保在显示一个时隐藏其他 2 个隐藏元素。所以，如果我点击#img2，那么#text2 会显示，但#text1 和#text3 会被隐藏。此外，这可能只是一个语法错误，但是当我试图将我的所有代码都放在 script 标签下时，它无法正常工作。我还喜欢将所有 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>

Answer 1

保持代码不引人注目是一个好习惯

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