實(shí)現(xiàn)功能說(shuō)明：
如下圖，點(diǎn)擊不同的文字能夠切換不同的頁(yè)面，同時(shí)這個(gè)tab的文字能夠相應(yīng)的變色，其他未選中的狀態(tài)默認(rèn)為灰色。
方案一：
使用css的偽類。
:active，元素被點(diǎn)擊時(shí)變色，但顏色在點(diǎn)擊后消失
:focus， 元素被點(diǎn)擊后變色，且顏色在點(diǎn)擊后不消失
.classone{
//默認(rèn)顏色color為灰色，當(dāng)然你也可以在這里寫(xiě)其他顏色以及位置的設(shè)置。
}
.classone:active {
color: rgba(61, 58, 58, 0.98);
}
.classone:focus {
color: rgba(61, 58, 58, 0.98);
}
如果我們只是簡(jiǎn)單的加上偽類，由于div等元素?zé)o法接受鍵盤(pán)或其他用戶事件，即不支持:focus偽類，可通過(guò)增加tabIndex屬性使其支持:focus。
即在相應(yīng)的html里面加上一個(gè)屬性tabindex
<i class='classone' @click="ClickOne" tabindex="1">基本信息</i>
加上一個(gè)click后就會(huì)，點(diǎn)擊后就是調(diào)用偽類的方法。如果在vue里面click沒(méi)反應(yīng)，可以改成click.native。
延展：
什么是偽類？
偽類用于定義元素的特殊狀態(tài)。是一種特殊的類，它表示的元素的一種狀態(tài)，不是固定某一個(gè)
常見(jiàn)的偽類選擇器。
如：
//懸停在 div 上, <div> 元素上使用 :hover 偽類的實(shí)例：
div:hover {
background-color: blue;
}
//:first-child 偽類與指定的元素匹配：該元素是另一個(gè)元素的第一個(gè)子元素。
p i:first-child {
color: blue; //匹配所有 <p> 元素中的首個(gè) <i> 元素
}
p:first-child i {
color: blue; //匹配所有首個(gè) <p> 元素中的所有 <i> 元素
}
//:lang 偽類允許您為不同的語(yǔ)言定義特殊的規(guī)則。
<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偽類詳情請(qǐng)見(jiàn)此鏈接
方案二：
上面利用偽類的話，只是當(dāng)鼠標(biāo)點(diǎn)擊文字時(shí)，會(huì)自動(dòng)變色，但是當(dāng)我們把鼠標(biāo)移到別的地方點(diǎn)擊，顏色又會(huì)回到默認(rèn)的灰色。
那這里，我是利用id 和class配合實(shí)現(xiàn)的。
//在html里面寫(xiě)上一個(gè)id,以及：class
<i id='ClassThree':class='{ClassThree_color:isThree}' @click="Three()" tabindex="3">
上傳文件</i>
//利用id寫(xiě)常規(guī)的設(shè)置
#ClassThree{
margin-left: 88px;
width: 100px
}
//當(dāng)變量isThree為真時(shí)，會(huì)渲染下面的樣式
.ClassThree_color{
color: rgba(0, 84, 254, 1);
}
//在js里
Three(){
this.isThree=true;
}
其中isThree是自己定義的布爾值(如果是vue框架，就在data里面設(shè)置相應(yīng)變量就好了），當(dāng)然我們也可以寫(xiě)等號(hào)表達(dá)式等。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-409901.html
經(jīng)驗(yàn)證，實(shí)現(xiàn)了預(yù)期目標(biāo)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-409901.html
到了這里，關(guān)于css點(diǎn)擊文字（非按鈕) 能自動(dòng)改變顏色。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
