// 版本一、自己判斷狀態 $("#Block1").click(function() { if ($("#hello1").is(":visible")) { $("#hello1").hide("slow"); $("#hello2").show("slow"); } else { $("#hello2").hide("slow"); $("#hello1").show("slow"); } }); // 版本二、使用 .toggle() 切換元件的 hide 與 show $("#Block2").click(function() { $("#hello3").toggle("fast"); $("#hello4").toggle("fast"); });
<div id = "Block1"> <span id = "hello1">ㄚㄚㄚ (按我)</span> <span id = "hello2" style="display:none;">ㄛㄛㄛ (按我)</span> </div> <br/> <div id = "Block2"> <span id = "hello3">ㄛㄛㄛ(按我)</span> <span id = "hello4" style="display:none;">ㄚㄚㄚ (按我)</span> </div>
#Block1, #Block2 { width:850px; border-collapse:collapse; } #hello1, #hello3{color:red;cursor:auto;}