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

时间:2015-07-22 09:31:01

标签: javascript html css

<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并在按钮点击时更改图像的来源。

1 个答案:

答案 0 :(得分:2)

尝试使用此jQuery代码段:

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

假设您要更改图像#image的src,并显示您的包装div .mac_1。

<强>更新

最好将内联样式放到类&#34; show&#34;在css文件中。 然后你可以去:

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

这将是更好的方法。