jq侧边栏的点击时背景图片的改变



html的结构

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');

})

})