如何在单击特定按钮时显示和隐藏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>