js 点击节点变色，默认第一条变色

最新推荐文章于 2022-09-28 16:37:35 发布

奚大野...

最新推荐文章于 2022-09-28 16:37:35 发布

阅读量259

点赞数

分类专栏： javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_41752378/article/details/126017430

版权

javascript 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

需求：默认第一条变色，鼠标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');
 })