更改導航欄中文本的顏色時激活

處理腳本時，我遇到的問題是導航欄上的顏色處於活動狀態時，如何將其更改爲例如白色？更改導航欄中文本的顏色時激活

HTML

<ul id="nav"> 
    <li><a href="#"><img src="images/home.png" /> Forside</a></li> 
    <li><a href="#"><span><img src="images/temperatur.png" /> Måling</span></a></li> 
    <li class="active"><a href="#"><span><img src="images/sol.png" /> Dagvakt</span></a></li> 
    <li ><a href="#"><img src="images/kveld.png" /> Kveldsvakt</a></li> 
    <li><a href="#"><img src="images/vaske.png" /> Kontroll CM</a></li> 
    <li><a href="#"><img src="images/søk.png" /> Søk</a></li> 
    <li><a href="#"><img src="images/top2.png" /> Statistikk</a></li> 
    <li><a href="#"><img src="images/top3.png" /> Rapport</a></li> 
</ul>

$('li').on('click', function(){ 
    $('li').removeClass('active'); 
    $(this).toggleClass('active'); 
})

CSS

Refer to JSFIDDLE, there's a lot of code

來源

2014-03-07 user3185936

您需要的只是一個CSS修改，請參閱下面的註釋區域，以便進行更改！

li.active a{ 
color:white; 
text-transform:uppercase; 
background-color:#ffffff; /*EDIT THIS FOR COLOUR */ 
color:#ffffff; 
}

現在活動頁面將被着色爲白色，因爲我修改了十六進制值（#FFFFFF）。

來源

2014-03-07 10:55:15 Woolnut

更改CSS的這一部分：

li.active a{ 
color:white; 
text-transform:uppercase; 
background-color:#009900; 
color:#ffffff; 
}

這（爲白色背景）：

li.active a{ 
    color:white; 
    text-transform:uppercase; 
    background-color:#ffffff; 
    color:#ffffff; 
    }

編輯：SRY我改變了懸停，而不是主動的第一次...

來源

2014-03-07 10:53:32

改變背景顏色#FFF

li.active a{ 
color:white; 
text-transform:uppercase; 
background-color:#fff; 
color:#ffffff; 

}

來源

2014-03-07 10:56:15

您已經使用了:active選擇，你也可以去爲:focus選擇。這個用例不需要JS。

ul#nav > li.active > a, 
ul#nav > li > a:active, 
ul#nav > li > a:focus 
{ 
    color:white; 
    text-transform:uppercase; 
    background-color:#009900; 
}

http://jsfiddle.net/EkLPG/4/

您可以通過給<li>類.active或當用戶點擊一個元素上應用活躍狀態。

如果你想擺脫默認的活動元素，你可以堅持你的JS：http://jsfiddle.net/EkLPG/6/

來源

2014-03-07 10:57:26

更改導航欄中文本的顏色時激活

回答

相關問題