Question

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

我有一个带有导航链接的导航栏，可以指向不同的页面，例如主页，关于我们，联系方式等。

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

以下是代码：

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 -->

Answer 1

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

之类的东西

 window.location

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

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

活动链接类更适用于页内标签。

Answer 2

当您在该页面上时，您需要将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>

等等。

如何保持导航活动的bg颜色在页面上保持活动状态？

2 个答案: