jQuery 实现相同控件点击变色

最新推荐文章于 2022-09-05 17:46:00 发布

xiaoguo321

最新推荐文章于 2022-09-05 17:46:00 发布

阅读量401

点赞数

分类专栏： js JQuery 文章标签： jQuery 点击变色

本文链接：https://blog.csdn.net/xiaoguo321/article/details/53217190

版权

js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

JQuery

5 篇文章 0 订阅

订阅专栏

这篇博客演示了如何利用jQuery实现点击按钮后使其背景颜色变为蓝色的效果。通过为HTML元素添加事件监听器和相应的CSS样式，可以实现点击元素时改变其背景颜色，未被点击的元素恢复默认颜色。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 点击变色</title>
</head>
  <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

<style>
.mt10{margin-top:5px;}
.hand{cursor:pointer;}
.menu_city ul li{float:left; background:#CCC;padding:6px 20px; margin-right:1px;list-style:none;}
.clearfix a li:hover{background-color: #FF00FF;}
</style>
<script>
function getMoney(moudle){
	var id= $(moudle).attr("id");
	var a = document.getElementsByName("a");
	for(var i=0;i<a.length;i++){
	   var item = a[i];
       if($(item).attr("id")==id){
	        $(item).find("li").css("background-color","blue");
			continue;
	   }
	   $(item).find("li").css("background-color","#CCC");
	}
   
}
</script>

<body class="index">                          
     <div class="menu_city" >
	  <ul class="clearfix">
		<a href="javascript:void(0)" style="color:#FFFFFF;" id="a1" name="a" οnclick="getMoney(this)"><li id="1">100</li></a>
		<a href="javascript:void(0)" style="color:#FFFFFF;" id="a2" name="a" οnclick="getMoney(this)"><li id="2">300</li></a>
		<a href="javascript:void(0)" style="color:#FFFFFF;" id="a3" name="a" οnclick="getMoney(this)"><li id="3">500</li></a>
		<a href="javascript:void(0)" style="color:#FFFFFF;" id="a4" name="a" οnclick="getMoney(this)"><li id="4">1000</li></a>
	 </ul>
      </div>  
</body>
</html>

xiaoguo321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 实现相同控件点击变色

jQuery 点击变色 .mt10{margin-top:5px;}.hand{cursor:pointer;}.menu_city ul li{float:left; background:#CCC;padding:6px 20px; margin-right:1px;list-style:none;}.clearfix a li:hover{background-color:
复制链接

扫一扫

专栏目录