css元素点击后变色，且点击别的地方不会颜色消失

ZraInCyy

于 2023-04-19 17:09:42 发布

阅读量6.4k

点赞数 7

文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/ZraInCyy/article/details/130247977

版权

本文介绍了在Vue.js应用中，如何实现点击元素使其变色，并在点击其他地方后保持选中状态。通过添加tabindex属性支持:focus伪类，结合CSS样式改变颜色。同时，利用data中的selectedIndex和Vue的:class绑定，实现元素被点击后的高亮状态持久化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：在这里插入图片描述

一、首先如果你的需求是点击元素变色就可以了，可以用第一种方法

//普通元素类似button按钮不用 tabindex=“1”，由于div不支持:focus伪类，可通过增加tabIndex属性使其支持:focus

 <div v-for="(item,index) in tableData" :key="index" class="fontStyle" tabindex="1" >
   	<div @click="systemChange(item,index)" >{{ item.system }}</div>
 </div>

css：

fontStyle:focus{
	color:#0C5ACF;
}

二、元素变色后点击其他地方保留颜色

首先在data中加入selectedIndex：0；
其次：

<div v-for="(item,index) in tableData" :key="index" class="fontStyle" tabindex="1" >
   <div :class="selectedIndex == index ? 'active':''" @click="systemChange(item,index)" class="lineStyle">{{ item.system }}</div>
</div>

js：

systemChange(val,index){
      this.selectedIndex = index;
},

css：

.lineStyle.active {
  color:#0C5ACF;
}