点击不同div改变背景色、文字颜色（:focus）；鼠标放上去显示被隐藏 文字

需求：像电脑里文件管理可以预览文件的排列方式：左侧文件类型；中间文件排列；右边文件预览；（看着分了三列其实是两列）

原文链接：https://blog.csdn.net/qq_42991509/article/details/106080491（感谢）
css伪类实现点击元素变色的效果，两个伪类是:active, :focus
:active，元素被点击时变色，但颜色在点击后消失；
:focus， 元素被点击后变色，且颜色在点击后不消失；
focus：用于选取获得焦点的元素。仅接收键盘事件或其他用户输入的元素允许 focus的 选择器。
对于div等元素无法接受键盘或其他用户事件，不支持:focus伪类，则可通过增加tabIndex属性使其支持:focus
ps:找了好久，想要div标签包裹内的文字被点击后改变背景颜色，:active不行闪一下就没了，:focus可以实现点新的地方改变背景色；
步骤：1.在你需要改色的div里写个class放你需要的背景色；2.在你需要改色的div里加tabindex这个属性，至于给值1、2、3、4没发现有什么区别。（我都不敢相信这么简单。。。）

<div class="pdfContents" >
            //float: left实现div左右排列
            <div style="width: 40vw;border-right: 1px solid #e8eaec;float: left;">
            //用了elementui把左侧又分左右两列，tabPosition值left就行
              <el-tabs :tab-position="tabPosition" style="height: 200px;">
                <el-tab-pane label="卡布" style="color: black;line-height: 30px;font-size: 17px;display: flex;align-items: center; ">
                //当你文件名太长，这三个overflow: hidden;当设置为 hidden 时，溢出的内容会被裁剪并且不会显示；text-overflow:ellipsis;当文本溢出其容器时，ellipsis 值会在溢出的文本末尾显示省略号（...）； white-space:nowrap;nowrap 值防止文本换行；
               //:title将鼠标悬停在元素上时把上面被隐藏的部分显示出来；
                  <div class="colorChange" tabindex="1"  @click="viewSelfFile()" :title="this.selfNameData.fileName">
                    {{this.selfNameData.fileName}}
                  </div>
                </el-tab-pane>
                
                <el-tab-pane label="星星" style="color: black;line-height: 30px;font-size: 17px">
                  <div v-if="supportNameData.length > 0">//因为卡布类型文档至少有一个，但星星类型文档可能没有，所以这里加判断如果没有就无数据
                    <div
                        v-for="item in supportNameData"
                        :key="item.id"
                        @click="viewSupportFile(item)"
                        :title="item.fileName"
                        class="colorChange"
                        tabindex="1">
                      {{ item.fileName }}
                    </div>
                  </div>
                  <div v-else>
                    <span style="color: black;line-height: 30px;font-size: 15px">暂无数据</span>
                  </div>
                </el-tab-pane>
              </el-tabs>
</div>

 <div class="pdfRight" style="position: relative">
              <div class="pages" style="height: calc(100vh - 30px - 30px - 110px);overflow: auto;width:60vw;cursor: pointer;">
                <div class="page" v-for="page in pageTotal" :style="{'width':pageWidth+'px'}">
                  <canvas :id="`pdfCanvas${page}`"></canvas>
                </div>
</div>
data() {
    return {
      tabPosition: 'left',           
    }       
}              
              
              
.pdfContents {
    display: flex;
    height: calc(100vh - 30px - 30px - 110px);
    width: 100%;
    position: relative;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
.colorChange:focus {
  //background-color: #e8eaec;
  color: #409EFF;
}