怎样给一个div加鼠标时间,让鼠标点击div之后更换底背景?再点击一下回复原来的底背景。
如题,我在做一个商城的商品陈列,用ul写的,li的里面有div还有按钮,所以我想给li做一个鼠标点击事件,让用户点击该商品的任意地方,li底背景变成另一个颜色的图片,再点...
如题,我在做一个商城的商品陈列,用ul写的,li的里面有div还有按钮,所以我想给li做一个鼠标点击事件,让用户点击该商品的任意地方,li底背景变成另一个颜色的图片,再点击一次取消。或是点击其他的,刚才的li自动变成原来的底背景。
展开
2013-05-20
展开全部
<body>
<div>abc</div>
<script type=text/javascript>
div= document.getElementsByTagName('div')[0];
var toggle_bg=false;
div.style.backgroundColor='#eee000';
div.onclick=toggle_div_bg;
function toggle_div_bg(){
if (toggle_bg){
this.style.backgroundColor='#eee000';
this.style.backgroundImage='';
toggle_bg=false;
}else{
this.style.backgroundImage= "url('bg.jpg')";
toggle_bg=true;
}
}
</script>
</body>
以上代码实现了点击div 切换背景颜色和背景图片。图片为 bg.jpg
<div>abc</div>
<script type=text/javascript>
div= document.getElementsByTagName('div')[0];
var toggle_bg=false;
div.style.backgroundColor='#eee000';
div.onclick=toggle_div_bg;
function toggle_div_bg(){
if (toggle_bg){
this.style.backgroundColor='#eee000';
this.style.backgroundImage='';
toggle_bg=false;
}else{
this.style.backgroundImage= "url('bg.jpg')";
toggle_bg=true;
}
}
</script>
</body>
以上代码实现了点击div 切换背景颜色和背景图片。图片为 bg.jpg
追问
我不太动js,我这里是这样写的,请问怎么应用你的这段代码呢?
奇瑞QQ
价格:12000.00
购买赠送
追答
可以在body 结束tag 之前加上函数定义和变量定义以及事件加载:
奇瑞QQ
价格:12000.00
购买赠送
var toggleBg = true;
var bgColor = '#eee000'; // 背景颜色
var bgImage = 'bg.jpg'; // 背景图片
var li_bg = document.getElementById('li_bg')
toggle_div_bg.apply(li_bg);
li_bg.onclick=toggle_div_bg;
function toggle_div_bg(){
if (toggleBg){
alert(1);
this.style.backgroundColor=bgColor;
this.style.backgroundImage='';
toggleBg = false;
}else{
alert(2);
this.style.backgroundImage= "url(" + bgImage + ")";
this.style.backgroundColor = '';
toggleBg = true;
}
}
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询