效果图
代码
.box {
display: flex;
}
.rol {
padding: 15px;
border: 1px solid rebeccapurple;
border-radius: 5px;
margin-right: 10px;
cursor: pointer;
}
.active {
background: rebeccapurple;
color: #FFF;
}
<div class="box">
<div class="rol active"> HUAWEI</div>
<div class="rol">APPLE</div>
<div class="rol">SONY</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.rol').click(function () {
$(this).addClass('active').siblings().removeClass('active');
})
})
</script>