这里主要想实现的一个功能就是：4个按钮，当点击其中一个按钮时，该按钮变颜色，其他按钮不变色。从而实现类似单选的功能。
之前尝试写如下代码：
<style>
.test:active{
background:red;
}
</style>
<button class=”test”>test</button>
当点击该按钮的时候，确实是变了红色，但是松开鼠标，随即恢复了之前的颜色。这个并不是想要的功能。而且也纳闷，按道理来说这个可以实现我想的功能，只要一按，这个按钮应该会一直显示红色；
然后，在网上学习了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() 方法返回被选元素的所有同级元素，那也就是当前选中元素的其他同级元素。
通过这个带代码就理解了。哈哈。