如何在單擊特定按鈕時顯示和隱藏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> 

我如何切換div（S）與new類的可視性每當按鈕被點擊？

Answer 1

試試下面

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

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