JQ側邊欄的點選時背景圖片的改變
先上圖，使用就去製作類似的效果
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');
})
})