您现在的位置是:首页 > Javascript
当前栏目
css点击文字(非按钮) 能自动改变颜色。
2023-03-31 10:43:01 时间
实现功能说明:
如下图,点击不同的文字能够切换不同的页面,同时这个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>
方案二:
上面利用伪类的话,只是当鼠标点击文字时,会自动变色,但是当我们把鼠标移到别的地方点击,颜色又会回到默认的灰色。
那这里,我是利用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里面设置相应变量就好了),当然我们也可以写等号表达式等。
经验证,实现了预期目标。
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件