Question

我正在努力让我的导航标签设置风格并正常工作。我相信我没有以正确的方式设置class="active"。它默认设置我的第一个TAB / PAGE，但是当我点击其他任何一个TABS / PAGES时，它仍会在我的第一个TAB / Page上突出显示（背景色激活）。
如何配置它以突出显示活动/单击的选项卡？

这就是我现在所拥有的代码：

<ul class="nav nav-tabs">
    <li class="active"><%= link_to "Active Projects", projects_path %></li>
    <li><%= link_to "Delinquent Projects", delinquent_projects_path %></li>
    <li><%= link_to "Completed/Closed Projects", closed_projects_path %></li>
</ul>

由于

Answer 1

渲染导航栏时，应检查当前路径。如果是“/ users”，则突出显示“用户”菜单项，而不是其他菜单项。如果是“/ orders”，则突出显示“订单”。等等。

这是为你做这项工作的一个小宝石：active_link_to。

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

Answer 2

我认为你需要创建一个像

这样的帮手

def active_link_to(text, link)
    content_tag(:li, :class => request.fullpath == link ? 'active' : nil) do
        link_to text, link
    end
end

Answer 3

一个简单的解决方案是检查控制器参数，因为每个操作都有相同的活动选项卡。

<li class=<%= params[:controller] == "users" ? "active": "" >

（因为我生锈了，我可能会有语法错误，特别是引号）。

此处列出的所有其他解决方案也应该有效。

GL＆amp; HF！

Answer 4

https://github.com/twg/active_link_to

gem 'active_link_to'

然后将代码简化为：

<ul class="nav nav-tabs">
    <%= active_link_to "Active Projects", projects_path, :wrap_tag => :li %>
    <%= active_link_to "Delinquent Projects", delinquent_projects_path, :wrap_tag => :li %>
    <%= active_link_to "Completed/Closed Projects", closed_projects_path, :wrap_tag => :li %>
</ul>

编辑：上面没有注意到答案。至少这是一个例子：）

如何使class ='active'正常工作？

4 个答案: