• css点击文字（非按钮) 能自动改变颜色。

    实现功能说明：
    如下图，点击不同的文字能够切换不同的页面，同时这个tab的文字能够相应的变色，其他未选中的状态默认为灰色。
    在这里插入图片描述

    方案一：
    使用css的伪类。
    :active，元素被点击时变色，但颜色在点击后消失
    :focus， 元素被点击后变色，且颜色在点击后不消失

    	.classone{
		//默认颜色color为灰色，当然你也可以在这里写其他颜色以及位置的设置。
	}
    .classone:active {
      color: rgba(61, 58, 58, 0.98);
    }
   .classone:focus {
     color:  rgba(61, 58, 58, 0.98);
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    如果我们只是简单的加上伪类，由于div等元素无法接受键盘或其他用户事件，即不支持:focus伪类，可通过增加tabIndex属性使其支持:focus。
    即在相应的html里面加上一个属性tabindex

     <i class='classone' @click="ClickOne" tabindex="1">基本信息</i>

    • 1

    加上一个click后就会，点击后就是调用伪类的方法。如果在vue里面click没反应，可以改成click.native。

    延展：
    什么是伪类？
    伪类用于定义元素的特殊状态。是一种特殊的类，它表示的元素的一种状态，不是固定某一个
    常见的伪类选择器。
    如：

    //悬停在 div 上, <div> 元素上使用 :hover 伪类的实例：
div:hover {
  background-color: blue;
}

//:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。
p i:first-child {
  color: blue; //匹配所有 <p> 元素中的首个 <i> 元素
}
p:first-child i {
  color: blue;    //匹配所有首个 <p> 元素中的所有 <i> 元素
}

//:lang 伪类允许您为不同的语言定义特殊的规则。
<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    具体css伪类详情请见此链接

    方案二：
    上面利用伪类的话，只是当鼠标点击文字时，会自动变色，但是当我们把鼠标移到别的地方点击，颜色又会回到默认的灰色。
    那这里，我是利用id 和class配合实现的。

    //在html里面写上一个id,以及：class
<i id='ClassThree':class='{ClassThree_color:isThree}' @click="Three()" tabindex="3">
上传文件i>

//利用id写常规的设置
#ClassThree{
            margin-left: 88px;
            width: 100px
        }
//当变量isThree为真时，会渲染下面的样式
.ClassThree_color{
            color: rgba(0, 84, 254, 1);
        }

//在js里
Three(){
this.isThree=true;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    其中isThree是自己定义的布尔值(如果是vue框架，就在data里面设置相应变量就好了），当然我们也可以写等号表达式等。

    经验证，实现了预期目标。

  • 相关阅读:
    LVS+Keepalived 高可用集群
    vue2学习之路由（router以及vue-router）
    关于标准IO缓冲区的问题
    Golang的GC
    C++ Reference: Standard C++ Library reference: C Library
    vue3双向绑定原理(对比vue2)
    YOLOv6-4.0部分代码阅读笔记-loss_fuseab.py
    docker 中镜像和容器区别
    【UE5|水文章】在UMG上显示帧率
    【能效管理】安科瑞新能源充电桩收费运维管理云平台应用分析
  • 原文地址：https://blog.csdn.net/qq_44267691/article/details/128036879