时间戳

首页 > 解决方案 > 如何在子元素上设置 active_link_to 以仅设置为活动？

ruby-on-rails - 如何在子元素上设置 active_link_to 以仅设置为活动？

问题描述

我是 Rails 新手，我只想设置active_link_to子元素。我正在使用这个 gem https://github.com/comfy/active_link_to

情况：

parent element path:
localhost:3000/columns  // This one is set to active when going to that specific page

child element path:
localhost:3000/columns/post // This one will also be active also but the parent element is also active

我有这个导航栏：

<ul class="nav-bar">
    <li class="nav-item">
        <%= active_link_to columns_root_path, :class => 'nav-link' do %>
            Columns
        <% end %>
    </li>
    <li class="nav-item">
        <%= active_link_to columns_post_path, :class => 'nav-link' do %>
            Post
        <% end %>
    </li>
</ul>

active_link_to如果我只去子元素，如何删除父元素中的。因为在我的情况下，当我走这条路时：and路径都localhost:3000/columns/post将设置为活动状态。columnspost

我的路线文件中有这里。 路线.rb

namespace :columns do
    root 'columns#index', as: "root"
    get 'post' => 'post#index'
end

通常我将文件夹设置为这个：

app/views/columns/columns/index.html.erb  //for the columns index
app/views/columns/post/index.html.erb  //for the post index

标签： ruby-on-railsrubyrubygems

解决方案

我对active_link_to宝石不熟悉。但是重新阅读文档，我猜这个active: :exact选项就是你要找的。

<ul class="nav-bar">
    <li class="nav-item">
        <%= active_link_to columns_root_path, active: :exact, :class => 'nav-link' do %>
            Columns
        <% end %>
    </li>
    <li class="nav-item">
        <%= active_link_to columns_post_path, active: :exact, :class => 'nav-link' do %>
            Post
        <% end %>
    </li>
</ul>

推荐阅读