首页IT科技css点击文字更换背景图片(css点击文字(非按钮) 能自动改变颜色。)

css点击文字更换背景图片(css点击文字(非按钮) 能自动改变颜色。)

时间2025-07-10 16:37:37分类IT科技浏览4174
导读:实现功能说明:...

实现功能说明:

如下图              ,点击不同的文字能够切换不同的页面                    ,同时这个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里面设置相应变量就好了)       ,当然我们也可以写等号表达式等。

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

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
为啥学python(为什么建议初学者选择Python入门?) 海洋cms使用教程(深入探索海洋CMS二次创作教程)