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

因为锚标签可能在CSS中为其指定了颜色。您可以更新CSS以包含以下内容：

li.active a { color:#fff; }

Answer 2

或者您需要将Class添加到相同的超链接

检查jsfiddle

记住我已经应用了document.ready（）所以你必须这样做点击jsfiddle左上角的运行按钮，然后才会看到主页超链接的活动类效果

$("#menu ul li a").each(function() {    
      if(url == (this.href)) { 
          //$(this).addClass("active");
          $(this).addClass("active");
      }
});

Answer 3

“颜色”定义文本的颜色，看起来您想要更改某个元素背景的颜色。所以“背景颜色”属性是合适的。

如果您需要，可以查看here

并且可能添加：

<div style="color:red; width:100px; height:100px; background-color:blue">
  <p> Hello </p>
</div>

所以你可以看到它是如何工作的：）

希望有所帮助

突出显示活动导航菜单，背景颜色：#fff工作和颜色：#fff不起作用？

3 个答案: