请问我这里有个按钮，然后我点击按钮，右边的小灯就亮起来，在点一次就灭了，用html 怎么写代码？
3个回答
展开全部
HTML代码:
<input tyle="button" value="Switch" id="switchButton" />
<div id="icon"></div>
CSS代码:
#icon{
width:20px; //小灯的宽度
height:20px; //小灯的高度
background-image:url(greenIcon.png) //小灯亮起的图片
background-repeat:no-repeat;
background-position:0 0;
}
#icon.grey{
background-image:url(greyIcon.png) //小灯熄灭的图片
}
JQUERY代码;
$(document).ready(function(){
$('#switchButton').live('click',function(){
//switchButton 点击的事件
if($('#icon').hasClass('grey')){
//判断小灯时候熄灭
$('#icon').removeClass('grey');
}else{
$('#icon').addClass('grey');
}
});
}); //浏览器加载完成
<input tyle="button" value="Switch" id="switchButton" />
<div id="icon"></div>
CSS代码:
#icon{
width:20px; //小灯的宽度
height:20px; //小灯的高度
background-image:url(greenIcon.png) //小灯亮起的图片
background-repeat:no-repeat;
background-position:0 0;
}
#icon.grey{
background-image:url(greyIcon.png) //小灯熄灭的图片
}
JQUERY代码;
$(document).ready(function(){
$('#switchButton').live('click',function(){
//switchButton 点击的事件
if($('#icon').hasClass('grey')){
//判断小灯时候熄灭
$('#icon').removeClass('grey');
}else{
$('#icon').addClass('grey');
}
});
}); //浏览器加载完成
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这种交互拿JS写，很简单的逻辑。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
分数太少
更多追问追答
追问
不至于吧，如果回答的好，我追加赏金
追答
追加的怎么有悬赏的来的实在
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
