需求:默认第一条变色,鼠标li滑过变色,点击li变色;
HTML
<div class="grid-content bg-purple left-scroll" id="left-scroll">
<ul>
<li v-for="item in treeData" :key="item.deviceId">
<span>{{item.label}}</span>
</li>
</ul>
</div>
css
.left-scroll li{
text-align:left;
width:90%;
font-size:13px;
cursor:pointer;
color:#ddd;
}
.left-scroll li span{
display:inline-block;
line-height:30px;
text-indent:2em;
}
.left-scroll li:hover{
color:#4fe9b0;
background:rgb(169 159 159 / 30%);
}
.left-scroll-click{
color:#4fe9b0 !important;
background:rgb(169 159 159 / 30%);
}
js
let dom = $('#left-scroll li');
if(dom.length>0){
dom[0].setAttribute('class','left-scroll-click')
};
$('#left-scroll li').click(function(){
$('#left-scroll li').removeAttr('class');
$(this).attr('class','left-scroll-click');
})
效果图
效果视频
21c78a276bd9fcd5008d37121048bfb3