html中,点击div,使其更换背景图片,两张图片来回切换

首先设定div的背景图片为1.点击后,div的背景图片变为2.再次点击这个div,背景图片又变回1.就是这样的一个循环过程,可以直接写在div里的onclick上,也可以... 首先设定div的背景图片为1.点击后,div的背景图片变为2.再次点击这个div,背景图片又变回1.就是这样的一个循环过程,可以直接写在div里的onclick上,也可以写成js。只是希望速度快点,并且能用,兼容性没问题 展开
 我来答
Prince____Yu
推荐于2016-04-22 · TA获得超过3718个赞
知道小有建树答主
回答量:864
采纳率:33%
帮助的人:960万
展开全部

稍等上代码!


你好我写的例子是用jquery来写的,引用的网上的地址,你可以直接用。

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>JS Bin</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
  .box1{
    width: 698px;
    height: 258px;
    border: 1px solid #ccc;
    background: url(http://www.snowinmay.net/6rooms/html/img/gsh/gsh_banner3.jpg) no-repeat;
  }
  .changeBg{
    background: url(http://www.snowinmay.net/6rooms/html/img/gsh/gsh_banner1.jpg) no-repeat;
  }
</style>
</head>
<body>
  <div class="box1">
  
  </div>
<script>
$(function(){
  $('.box1').toggle(function() {
    $(this).addClass('changeBg');
  }, function() {
     $(this).removeClass('changeBg');
  });
  
})
</script>
</body>
</html>

希望能帮你,有问题可以追问!

追答
有问题可以举行交流
风之岛屿
2013-12-25 · TA获得超过117个赞
知道答主
回答量:174
采纳率:0%
帮助的人:68万
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
<script src="模板/js/jquery-1.8.0.js"></script>
<script>
$(function (){
    $('#div1').toggle(
        function (){
            $(this).css('background','blue')    
        },
        function (){
            
            $(this).css('background','red')
        }
    )
})
</script>


<div style="background:red;width:50px;height:50px" id='div1' ></div>
</body>
</html>

  

更多追问追答
追问
额,我想要的是背景图片的切换,不是背景颜色,并且这颜色点击后也没有变化
追答
这是JQuery 你自己得引入库文件  背景颜色能切  难道背景图很难?   我暂时没时间帮你了  不好意思  你可以看看  有效果的  JQ 简单
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2013-12-26
展开全部
toggle在jquery1.9版本后就不支持了
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式