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

之前尝试写如下代码：

<style>

.test:active{

background:red;

}

</style>

<button class="test">test</button>

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

然后，在网上学习了https://blog.csdn/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/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() 方法返回被选元素的所有同级元素，那也就是当前选中元素的其他同级元素。

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

更多推荐

JQuery实现按钮点击变色功能