jquery 实现三个按钮点击哪个改哪个颜色
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="style/jquery-1.7.2.min.js"></script>
<title>通过筛选颜色改变背景色</title>
<style>
*{ margin:0; padding:0;}
.hb{ width:200px; height:200px; margin:50px auto; background-color:black;}
.dp{ width:400px; height:100px; margin:0 auto;}
.dp button{ width:100px; height:100px; margin:0 auto; margin-left:30px; border:0; border-radius:50%;}
.red{ background-color:red;}
.orange{ background-color:orange;}
.blue{ background-color:blue;}
</style>
<script>
$(document).ready(function(){
//点击button触发事件，改变画板的颜色
$('.dp button').click(function(){
//先获取他们的class值以改变颜色
var color=$(this).attr('class');
//改变画板的颜色
$('.hb').css('background-color',''+color+'');
})
})
</script>
</head>
<body>
<div class="hb"> </div>
<div class="dp">
<button class="red"></button>
<button class="orange"></button>
<button class="blue"></button>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(":button").click(function(){
$(this).css("background","颜色")；
});
$(this).css("background","颜色")；
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
简单，如果是3个按钮的话不能用1楼的方法。不过你也没给出三个按钮的代码，我就凑合写了，你应该能看明白。
//3个按钮
<input id="button1" type="button" value="按钮1" onclick="aa()"/>
<input id="button2" type="button" value="按钮2" onclick="bb()"/>
<input id="button3" type="button" value="按钮3" onclick="cc()"/>
//script中的方法
<head>
<script>
function aa(){ $("#button1").css("background-color","red"); } //改变按钮1的颜色，下面2个以此类推
function bb(){ $("#button2").css("background-color","red"); }
function cc(){ $("#button3").css("background-color","red"); }
</script>
</head>
不明白请追问，如果对你有帮助，记得采纳~
//3个按钮
<input id="button1" type="button" value="按钮1" onclick="aa()"/>
<input id="button2" type="button" value="按钮2" onclick="bb()"/>
<input id="button3" type="button" value="按钮3" onclick="cc()"/>
//script中的方法
<head>
<script>
function aa(){ $("#button1").css("background-color","red"); } //改变按钮1的颜色，下面2个以此类推
function bb(){ $("#button2").css("background-color","red"); }
function cc(){ $("#button3").css("background-color","red"); }
</script>
</head>
不明白请追问，如果对你有帮助，记得采纳~
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
