Question

处理脚本时，我遇到的问题是导航栏上的颜色是否处于活动状态，如何将其更改为例如白色？

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>

JS

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

CSS

Refer to JSFIDDLE, there's a lot of code

Answer 1

更改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我改变了悬停而不是第一次激活...

Answer 2

您只需要对此进行CSS修改，请参阅下面注释的区域以了解更改的位置！

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

现在，当我修改了十六进制值（#FFFFFF）时，活动页面将变为白色。

Answer 3

将背景颜色更改为#fff

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

}

Answer 4

您已使用: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/

活动时更改导航栏中文本的颜色

4 个答案: