在按钮上单击显示隐藏的div并更改图像？

Question

<div class="mac_1 tab_1 ipad_1" style=" float:right; margin:10px 20px 0 0;border:1px solid red;  display: none;"></div>
    <img src="images/mackbook.png" id="image"/>
    <a href="#" id="mac" class="button facebook" style="width:120px;  padding: 10px 0px; float:left; font: bold 22px 'Open Sans', sans-serif Helvetica, Clean, sans-serif;" OnClick="action();">Mackbook</a>    
    <a href="#" class="button facebook" style="width:80px;  padding: 10px 0px; float:left; font: bold 22px 'Open Sans', sans-serif Helvetica, Clean, sans-serif;" OnClick="action1();">Tablet</a>   
    <a href="#" class="button facebook" style="width:80px;  padding: 10px 0px; float:left; font: bold 22px 'Open Sans', sans-serif Helvetica, Clean, sans-serif;" OnClick="action2();">iPad</a> 
</div>

How to show the div .mac_1 and change the source of the image on button click.

Answer 1

Try it with this jQuery snippet:

$(document).ready(function(){
    $("#button").click(function(){
        $(".mac_1").css("display","block"); 
        $("#image").src("yourSource"); 
    });
}); 

Assuming you want to change the src of the image #image, and show your wrapper div .mac_1.

UPDATE

Would be better to place the inline styles to class "show" in css file. Then you could go:

...
$(".mac_1").addClass("show");
...

Would be the better approach.