如何在单击特定按钮时显示和隐藏div？

Question

我有以下HTML代码：

<button>good</button><br>   
<button>bad</button><br> 
<div class="new" style = "display: none;">booknow</div>
<div class="old">
    <a href="www.success.html">welcome.</a>
</div>

以及以下JavaScript代码：

<script>
    $(document).ready(function() {
        $("button").click(function() {   /*button click event*/   
            $(".new").toggle();          /*new class calling */
        });       
    });
</script>

每当点击一个按钮时，如何用类new切换div的可见性？

Answer 1

尝试以下

＆＃13;

＆＃13;

$(document).ready(function(){ 
   $("button.good").click(function(){ 
      $(".new").toggle();
   });
   $("button.bad").click(function(){ 
      $(".old").toggle();
   });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="good">Good</button><br> 
<button class="bad">Bad</button><br> 
 <div class="new">booknow</div>
<div class="old"><a href="www.success.html">welcome.</a></div>

＆＃13;

＆＃13;

＆＃13;