先上图，使用就去制作类似的效果
html的结构
<div class="con-l-left-list">
<div class="item active">
<div class="message">
<div class="imgs imgs0"></div>
<span class="texts">私信</span>
</div>
</div>
<div class="item">
<div class="message">
<div class="imgs imgs1"></div>
<span class="texts">评论</span>
</div>
</div>
<div class="item">
<div class="message">
<div class="imgs imgs2"></div>
<span class="texts">赞</span>
</div>
</div>
</div>
css样式
.item{
height: 40px;
width: 160px;
color: #7a7a7a;
cursor: pointer;
.message{
margin-left: 40px;
display: inline-block;
width: 80px;
height: 40px;
.imgs{
display: inline-block;
vertical-align: middle;
width: 14px;
height: 14px;
background-size: 14px 14px;
}
.imgs0{
background-image: url('../../images/camera.png');
}
.imgs1{
background-image: url('../../images/message.png');
}
.imgs2{
background-image: url('../../images/zan.png');
}
.texts{
padding-left: 10px;
font-size: 14px;
line-height: 40px;
}
}
}
.active{//active添加到最外层，其中写改变的内容，结构和没改变得css样式一样主要思想是覆盖之前的css样式，但要考虑优先级如果优先级相同要把active放在下边对之前的进行覆盖
background-color: @main-color;
color: #ffffff!important;
.message {
.imgs0{
background-image: url('../../images/close.png');
}
.imgs1{
background-image: url('../../images/close.png');
}
.imgs2{
background-image: url('../../images/close.png');
}
}
}
jq代码
$('.item').each(function (index, item) {
$(this).click(function () {
$(this).addClass('active').siblings().removeClass('active');
})
})