如何在页面上保持导航活动背景颜色以保持活动状态？答案

【问题标题】：How to keep the nav active bg color to stay active when on a page?如何在页面上保持导航活动背景颜色以保持活动状态？
【发布时间】：2014-02-04 07:15:54
【问题描述】：

我正在使用rails 4.0.1 和ruby 2.0.0 以及最新的bootstrap.

我有一个导航栏，其中包含指向不同页面的导航链接，例如主页、关于我们、联系方式等。

我更改了默认导航栏悬停链接的背景颜色，但是当我实际单击链接并转到该页面时，我似乎无法保持链接的背景颜色保持该颜色。

代码如下：

CSS：

$navbar-default-bg: #9B242D;
$navbar-default-link-color: white;
$navbar-default-link-hover-bg: #BC3F49;
$navbar-default-link-active-bg: #BC3F49;
$navbar-default-link-active-color: white;

_header.html.erb

  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav navbar-right navbar-links navbar-default">

      <li><%= link_to "About Us", about_path %></li>
      <li><%= link_to "Our Mission", mission_path %></li>
      <li><%= link_to "The Founders", founder_path %></li>
      <li><%= link_to "Current Events", current_events_path %></li>
      <li><%= link_to "Donations", donations_path %></li>
      <li><%= link_to "Contact", contact_path %></li>

    </ul>
  </div><!-- /.navbar-collapse -->

【问题讨论】：

标签： css ruby-on-rails twitter-bootstrap

【解决方案1】：

当您在该页面上时，您需要将active 类添加到<li>，以执行此操作

<li class="<%= 'active' if current_page?(about_path) %>"><%= link_to "About Us", about_path %></li>
<li class="<%= 'active' if current_page?(mission_path) %>"><%= link_to "Our Mission", mission_path %></li>

等等。

【讨论】：

这不起作用:(我将此导航栏作为部分页面自动呈现在所有页面上。如果该信息有帮助，我想知道，但是是的，我试过了，但没有用。
在我将“active-bg”改为“active”之后，没关系！

【解决方案2】：

我建议使用 javascript 添加一个“当前页面”类，它将调整上述链接的背景颜色。这将涉及向您的所有添加类以识别它们，您可以使用类似

 window.location

获取页面所在的当前 URL。例如

<li class="js-contact"><%= link_to "Contact", contact_path %></li>

活动链接类更多用于页内选项卡。

【讨论】：