Question

我有一个使用ul作为工具栏的rails应用程序。我想要一个样式（选中）应用于用户所在的页面。

我该怎么做？

这是我到目前为止所做的，但所选的样式是硬编码的，我也不知道如何知道选择了哪个页面。

      <ul>
        <li class="firstItem"><%= link_to "About", '/about' %></li>
        <li class="item"><%= link_to "Page1", '/page1' %></li>
        <li class="item selected" <%= link_to "Page2", '/page2' %></li>
        <li class="item"><%= link_to "Contact", '/contact' %></li>
        <li class="lastItem"><%= link_to "Blog", '/blog' %></li>
      </ul>

Answer 1

我完全赞同Jarrod的建议，但是如果您遇到处理其他条件的需要（并希望在HTML代码中避免使用丑陋的嵌入式ruby），请查看Rails的content_tag方法。

有了它，你可以替换类似的东西：

<li class=<%= @post.active? ? 'active' : 'suspended' %>>
  <%= link_to @post.name, post_path(@post) %>
</li>

有类似的东西：

<%= content_tag :li, link_to(@post.name, post_path(@post), :class => @post.active? ? 'active' : 'suspended' %>

当然，将这些代码粘贴到帮助器中并从那里调用它将为您赢得更多的优雅点。

希望这有帮助。

PS：这是我在Stackoverflow上的第一篇文章，请保持温和。：）

Answer 2

如果每个li都链接到不同的控制器，您可以使用controller_name添加或不添加selected类

以下是我的应用中的示例，它是haml

  %ul
    %li
      %a{:href => '/kebabs', :class => ('current' if controller_name == 'kebabs')} Admin kebabs
    %li
      %a{:href => '/statistics', :class => ('current' if controller_name == 'statistics')} Statistiques
    %li
      %a{:href => '/people', :class => ('current' if controller_name == 'people')} Admin Personnes

欢呼声

Answer 3

您也可以使用css。从控制器和操作名称为每个页面的每个页面提供一个类和id。

<body class="<%= controller.controller_name %>" id="<%= controller.action_name %>">

然后给你的ul和li元素一个id。

<ul id="nav'>
  <li id="about"></li>
  <li id="contact"></li>
  <li id="blog"></li>
</ul>

现在，您可以在样式表中引用特定页面上的特定链接。

body.blog#index ul#nav a#blog:link

因此，如果你想让栏目链接“粘性”，你可以一次性引用它们，而忽略身体ID。

body.blog ul#nav a#blog:link,
body.contact ul#nav a#contact:link {
  background-color: red;
}

Check out more on CSS selectors.

我如何有条件地设置<li> in rails？</li>

3 个答案: