位置: IT常识 - 正文
css点击文字（非按钮) 能自动改变颜色。(css点击菜单显示内容)
发布时间：2024-01-17推荐整理分享css点击文字（非按钮) 能自动改变颜色。(css点击菜单显示内容)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:css文字显示点点,css设置点击效果,css 点击样式,css文字显示点点,css点击后,css中点击字体变颜色,css点击后,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); }
如果我们只是简单的加上伪类，由于div等元素无法接受键盘或其他用户事件，即不支持:focus伪类，可通过增加tabIndex属性使其支持:focus。 即在相应的html里面加上一个属性tabindex
<i class='classone' @click="ClickOne" tabindex="1">基本信息</i>加上一个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>具体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;}其中isThree是自己定义的布尔值(如果是vue框架，就在data里面设置相应变量就好了），当然我们也可以写等号表达式等。
经验证，实现了预期目标。
上一篇：JavaScript-匿名函数(js匿名函数和命名函数)
下一篇：axios 中如何取消请求_从不会使用到精通原理_番茄出品(如何取消axios请求)
