Question

我是Rails的新手，刚刚完成了One Month Rails课程。当我在当前链接上时，我搜索了如何使我的导航链接具有不同的颜色，就像我在主页中，导航主页链接应该具有背景颜色等。我发现但是，这个active_link_to，我还不知道如何阅读文档。我该怎么用？

以下是active_link_to文档的链接：https://github.com/comfy/active_link_to

这是我的代码，我认为应该放置active_link_to：

<nav class="navbar navbar-static-top navbar-default" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to "Pinteresting", root_path, class: "navbar-brand" %>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <%= link_to root_path do %>
            <span class="glyphicon glyphicon-home"></span> Home
          <% end %>
        </li>
        <li>
          <%= link_to about_path do %>
            <span class="glyphicon glyphicon-user"></span> About
          <% end %>
        </li>
        <% if user_signed_in? %>
          <li>
            <%= link_to new_pin_path do %>
              <button type="button" class="btn btn-primary btn-xs">
                <span class="glyphicon glyphicon-pushpin"></span> New Pin
              </button>
            <% end %>
          </li>
          <li>
            <%= link_to edit_user_registration_path do %>
              <span class="glyphicon glyphicon-cog"></span> Account Settings
            <% end %>
          </li>
          <li>
            <%= link_to destroy_user_session_path, method: :delete do %>
            <span class="glyphicon glyphicon-off"></span> Log out
            <% end %>
          </li>
        <% else %>
          <li>
            <%= link_to new_user_session_path do %>
              <span class="glyphicon glyphicon-check"></span> Sign in
            <% end %>
          </li>
        <% end %>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

Answer 1

以下是一个简单示例，说明如何将active_link_to添加到项目中：

将其添加到您的Gemfile：

gem "active_link_to"

通过Bundler安装gem：

bundle install

然后，要在您的项目中使用，只需用link_to替换active_link_to助手 - 您不应该修改任何其他内容，因为active_link_to充当link_to的包装器。

完成上述操作后，您可以为添加到任何活动链接的.active类添加样式。

样式表中的某处：

a.active {
  background-color: #6699ff;
  /* other styling here, as desired */
}

希望这有帮助！

Answer 2

我还不知道如何阅读文件。

你认真吗？

-

按照它告诉你的步骤......

#Gemfile
gem "active_link_to"

#navbar
<%= active_link_to "Your text", path %>

我们在this project使用了宝石。

它的工作原理与link_to帮助器完全相同，除非您所在的页面与提供的路径匹配，否则该链接将附加active类：

active_link_to 'Users', '/users'
# => <a href="/users" class="active">Users</a>

-

如果要设置“活动”链接的样式，您将能够使用以下内容：

#app/assets/stylesheets/application.css
nav a.active {
   // styles here
}

如何使用active_link_to？

2 个答案: