javascript - 突出显示事件导航菜单，背景色 :#fff works and color:#fff dont works?

Question

我正在使用我在论坛中看到的示例来突出显示当前导航菜单。

例如，我可以让我的事件导航菜单具有 background-color:#fff，但我没有成功执行 color:#fff。为什么 background-color:#fff 有效而 color:#fff 无效？

我的 html:

<section id="menu-container">
    <nav id="menu">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            >
        </ul>
    </nav>   
</section>

脚本 jquery:

<script type ="text/javascript">
$(function(){

    var url = window.location.href; 

    $("#menu ul  li a").each(function() {

        if(url == (this.href)) { 
            $(this).closest("li").addClass("active");
        }
    });
});         
</script>

CSS:

.active{
    color:#FFF;
}

我的整个 CSS:

#menu-container{background:#243138; width:100%; height:62px;float:left; margin-top:15px; border-top: 4px solid #63F;}
#menu{width:960px; height:auto; margin:0 auto 0 auto;}
#menu ul{list-style-type:none;}
#menu ul li{float:left; height:62px; line-height:62px; font-size:20px; font-family:'bariol_regularregular';}
#menu ul li a{text-decoration:none; margin-right:5px; color:#ccc; display:block; height:62px; line-height:62px;padding:0 5px 0 5px; }
#menu ul li a:hover{color:#fff;}

active { color:#fff; }

Answer 1

因为 anchor 标记可能在 CSS 中分配了颜色。您可以更新您的 CSS 以包含以下内容:

li.active a { color:#fff; }