JQuery实现按钮点击变色功能

最新推荐文章于 2023-04-14 10:35:45 发布

黎仔656

最新推荐文章于 2023-04-14 10:35:45 发布

阅读量1.2w

点赞数 3

分类专栏：前端方面知识文章标签： jquery

本文链接：https://blog.csdn.net/jiezhang656/article/details/101393402

版权

前端方面知识专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这里主要想实现的一个功能就是：4个按钮，当点击其中一个按钮时，该按钮变颜色，其他按钮不变色。从而实现类似单选的功能。

之前尝试写如下代码：

<style>

.test:active{

background:red;

}

</style>

当点击该按钮的时候，确实是变了红色，但是松开鼠标，随即恢复了之前的颜色。这个并不是想要的功能。而且也纳闷，按道理来说这个可以实现我想的功能，只要一按，这个按钮应该会一直显示红色；

然后，在网上学习了https://blog.csdn.net/chen_nian_chen/article/details/80848047 这里的做法，自己又写了一个，终于实现了这个功能，附上代码：

<!DOCTYPE html>
<html>
<head>
<title>userInformation.html</title>
<meta charset="UTF-8">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
   
   <p>请选择你需要的水果（只可选取一种）：</p>
   <div class="leftdiv">
       <button>苹果</button>
       <button>梨子</button>
       <button>香蕉</button>
   </div>
</body>
<script>
$(".leftdiv button").click(
function() {
$(".leftdiv button").eq($(this).index()).css('background', '#2eafbb').siblings().css('background', '#f5f5f5');
})
</script>
</html>

备注：

1、这里的eq()是一种方法：返回带有被选元素的指定索引号的元素，eq($(this).index())也就是当前选中元素的索引号；

2、siblings() 方法返回被选元素的所有同级元素，那也就是当前选中元素的其他同级元素。

通过这个带代码就理解了。哈哈。

黎仔656

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
4
评论
JQuery实现按钮点击变色功能

这里主要想实现的一个功能就是：4个按钮，当点击其中一个按钮时，该按钮变颜色，其他按钮不变色。从而实现类似单选的功能。之前尝试写如下代码：<style>.test:active{background:red;}</style><button class="test">test</button>当点击该按钮的时候，确实是变...
复制链接

扫一扫