原生css实现点击更换背景图的方法 :focus的使用方法

使用:focus实现点击更换背景图

1.效果：不使用组件的情况下，利用原生的js实现点击修改背景的效果

2.代码

在行内使用 tabindex=“1” 的形式，让 :focus 生效

html部分

    <ul>
      <li @click="gotoHomepage" tabindex="1">首页</li>
      <li @click="gotoDate" tabindex="2">数据</li>
      <li @click="gotoService" tabindex="3">服务</li>
      <li @click="gotoSafe" tabindex="4">安全</li>
      <li @click="gotoLog" tabindex="5">日志管理</li>
      <li @click="gotoMessage" tabindex="6">消息</li>
    </ul>

css部分

    li:focus {
      color: #ffffff;
      background-image: url("~@/assets/imgs/chooseBg.png");
      background-size:100% 100% ;
      border-bottom: 2px solid #9bb9f1;
    }