html网页按对应按钮图片局部变换

Question

按绿色按钮图片黄色部分就会变绿色，按黄色按钮绿色部分就变黄色，图片只是为了描述，其实页面就是显示一个圆
怎么样编写程序实现

Answer 1

用jq添加点击事件改变css样式追问

求源码

追答

Insert title here$(function(){ $("input:eq(0)").click(function(){ $(".b").css({"background-color":"blue"}); }); $("input:eq(1)").click(function(){ $(".b1").css({"background-color":"yellow"}); }); }).a{width: 200px;height: 200px;background-color: red; border-radius:50%;float: left; }.b{width: 100px;height: 100px;background-color: yellow; border-radius:50%;margin:auto;margin-top: 40px}.b1{width: 100px;height: 100px;background-color: blue; border-radius:50%;margin:auto;margin-top: 40px}

追问

谢谢，但我的意思是相互切换

按按钮相互切换



追答

？

追问

页面就是一个大圆两按钮，按俩按钮切换中间的小圆颜色

追答

加一个if判断就行了

Insert title here$(function(){ $("input:eq(0)").click(function(){ if($(".b").css("background-color")=="blue"){ $(".b").css({"background-color":"yellow"}); }else{ $(".b").css({"background-color":"blue"}); } }); $("input:eq(1)").click(function(){ if($(".b1").css("background-color")=="blue"){ $(".b1").css({"background-color":"yellow"}); }else{ $(".b1").css({"background-color":"blue"}); } });}).a{width: 200px;height: 200px;background-color: red; border-radius:50%;float: left; }.b{width: 100px;height: 100px;background-color: yellow; border-radius:50%;margin:auto;margin-top: 40px}.b1{width: 100px;height: 100px;background-color: blue; border-radius:50%;margin:auto;margin-top: 40px}

第二个if判断需要改成“yellow”不然需要点击两下才变颜色，代码写急了，不好意思

改条件同时分支里的赋值也要颠倒一下