在按鈕上單擊顯示隱藏的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>

如何在單擊按鈕時顯示div .mac_1並更改圖像源。

Answer 1

嘗試使用以下jQuery代碼段：

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

假設您想更改圖像#image的src，並顯示包裝div .mac_1。

UPDATE

最好將內聯樣式放在css文件中的“ show”類中。 然后您可以去：

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

會是更好的方法。