Question

Html div：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li class="hidden">
      <a href="#page-top"></a>
    </li>
    <li> 
      <a class="page-scroll" href="#services">Services</a>
    </li>
    <li>
      <a class="page-scroll" href="#portfolio">Portfolio</a>
    </li>
    <li>
      <a class="page-scroll" href="#about">About</a>
    </li>
    <li>
      <a class="page-scroll" href="#team">Team</a>
    </li>
    <li>
      <a class="page-scroll" href="#contact">Contact</a>
    </li>
   </ul>
 </div>

Css代码：

.navbar-custom .navbar-nav>.active>a {
  color:#fff;
  background-color:#fed136
}

你好，我有这个导航栏，当你向下滚动到网站的每个部分时，从条形栏（活动的一个）的部分名称将采用背景颜色（＃fed136）。我试图做一些事情，但它没有用：当向下滚动时，我希望每个部分都有一个特定的颜色，所以我不希望那一个背景颜色是默认的。我试图在每个部分添加“id”，但它没有用。

<a class="page-scroll" href="#services" id="serv_id">Services</a>
#serv_id.navbar-custom .navbar-nav>.active>a {background-color:red !important}

这是我想要做的一个示例：http://www.rad-road.com/Capture.PNG http://www.rad-road.com/Capture2.PNG 有什么帮助吗？

Answer 1

当您使用ID时，您需要在CSS中指定所有内容。页面上的ID必须是唯一的。删除类后，它可以正常工作。

＆＃13;

#serv_id {
  background-color: red;
}

＆＃13;

<a class="page-scroll" href="#services" id="serv_id">Services</a>

＆＃13;

HTML导航栏为每个部分标题添加多种背景颜色

1 个答案: