Implemente un grupo de botones sin ID, obtenga eventos de respuesta al hacer clic, modifique el estilo, este artículo usa jquery-3.3.1.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>jquery选择器之按钮组</title>
<script src="../jquery-3.3.1.min.js"></script>
<style media="screen">
.btn {
height:30px;
weight:50px;
}
.btn-info{
background:#fff;
}
.btn-inverse{
background:#000;
}
</style>
</head>
<body>
<p id="btn_group">
<button class="btn btn-info" ">昨天</button>
<button class="btn btn-info" ">今天</button>
<button class="btn btn-info" ">上周</button>
<button class="btn btn-inverse" ">上个月</button>
<button class="btn btn-info" ">自定义</button>
</p>
<script type="text/javascript">
$("#btn_group>:button").click(function(){
$("#btn_group>:button").each(function ()
{
$(this).prop("className", "btn btn-info");
})
this.className = "btn btn-inverse";
});
</script>
</body>
</html>
