<style type="text/css"> .run-button{width:100px; height:38px;display:block;position:absolute;right:70%; top:200px;} .test{ width:100px; height:100px; color:#000; border:1px blue solid;} .tips{color:#f00;} </style> <script type="text/javascript"> $(function(){ $(".run-button").focus().click(function(){ if($('.test').is(':visible')){ $('.test').hide().next().text('注意:div被隐藏了！'); }else{ $('.test').show().next().text('div显示，能看见'); } //用基本选择器 :hidden 也行 // if($('.test').is(':hidden')){ // $('.test').show().next().text('div显示，能看见'); // }else{ // $('.test').hide().next().text('注意:div被隐藏了！'); // } }) }) </script> <p style="padding:8px 0;"> 说明：多次点击右上角按钮，使div层在显示 、隐藏两者状态间自由切换 </p> <p> <input type="button" value="点击测试" class="run-button"/> </p> <div class="test"> 该div默认显示 </div> <p> <span class="tips">注意：div当前显隐藏状态</span> </p>