我怎样才能有条件地设置一个在rails中？

I have a rails app using a ul as a toolbar. I want to have a style (selected) to apply to the page the user is on.

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

How can I do that?

我怎样才能做到这一点?

This is what I have so far, but the selected style is hard coded and I'm also not sure how to know what page is selected.

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

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

3 个解决方案

#1

if each li is linked to different controller you can use controller_name to add or not the selected class

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

Here is an example from my app, it's in haml

这是我的应用程序中的一个示例,它是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

cheers

#2

I agree totally with Jarrod's advice, but just in case you encounter the need to process additional conditions (and want to avoid ugly embedded ruby in your HTML code), take a look at Rails' content_tag method.

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

With it, you can replace something like:

有了它,您可以替换以下内容:

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

With something like:

有类似的东西:

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

And of course, sticking this code into a helper and calling it from there will earn you more elegance-points.

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

Hope this helps.

希望这可以帮助。

PS: This is my first post on *, please be gentle. :)

PS:这是我在*上的第一篇文章,请温柔。 :)

#3

You can also use css for this. Give each the body each page a class and id from your controller and action names.

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

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

Then give your ul and li elements an id.

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

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

Now you can reference a specific link on a specific page from your stylesheet.

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

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

So if you want to make section links 'sticky' you can reference them all at once, leaving out the body id.

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

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

Check out more on CSS selectors.

查看有关CSS选择器的更多信息。

#1