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

如何显示div.mac_1并在单击按钮时更改图像的源。

使用此jQuery代码段进行尝试：

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

假设您想更改映像的src#映像，并显示包装器div.mac#1

更新

最好将内联样式放在css文件中的类“show”中。 然后你可以去：

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

---

这是更好的办法。

我没听清你的问题。你能用JSFIDLE解释一下你的问题吗？问题在哪里，亲爱的朋友？你已经在

div

本身中插入了按钮。。因此，按钮也将不可见，用户将如何单击按钮来显示

div

？？如果我有多个类名，如mac_1 tab_1 ipad_1在一个分区中，是否可以删除内联样式？如果是这样的话，你可以把它放在你所学的课程中。然后使用jQuery或vanilla Javascript，您可以添加另一个类，然后触发

display:block

@MarcoKunz谢谢。我改进了我的答案

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