按 id 突出显示 rails 3 中的当前页面

Question

我在 Rails 3 中循环渲染我的主要顶部导航：

<ul>
<% Placement.all.each do |placement| %>
  <li><%= link_to placement.placementname, placement_path(placement.id)%> </li>
<%end%>
</ul>

如何根据 url 中的 id 突出显示当前展示位置的背景？网址如下所示：
本地主机：3000/placements/1
本地主机：3000/placements/2
...

一旦用户单击其中一个选项卡，左侧就会出现第二个导航栏。这就是我渲染它的方式：

<% @placement.ads.all.each do |ad| %>
    <li><%= link_to ad.adname, placement_ad_path(@placement, ad) %> </li>
<%end%>

如何根据 url 中的 id 突出显示当前广告的背景？网址如下所示：localhost:3000/placements/1/ads/1
本地主机：3000/placements/2/ads/3
...

Answer 1

<ul>
 <% Placement.all.each do |placement| %>
   <li class=<%= "highlighted" if placement.id==params[:id].to_i %>>
       <%= link_to placement.placementname, placement_path(placement.id)%> </li>
 <%end%>
</ul>

和

<% @placement.ads.all.each do |ad| %>
  <li class=<%= "highlighted" if ad.id==params[:id].to_i %>>
    <%= link_to ad.adname, placement_ad_path(@placement, ad) %> </li>
<%end%>

Answer 2

使用样式表和选择性地应用类名。假设您已经在控制器中设置了 @placement 和 @ad，我会这样做：

<ul class="placements">
<% Placement.all.each do |placement| %>
    <li class="placement <%= 'selected' if placement == @placement %>">
        <%= link_to placement.name, placement %>
    </li>
<% end %>
</ul>

<ul class="ads">
<% @placement.ads.each do |ad| %>
    <li class="ad <%= 'selected' if ad == @ad %>">
        <%= link_to ad.name, [@placement, ad] %>
    </li>
<% end %>

然后你可以把这样的东西放到你的样式表中。 （这里我假设 SCSS 或 LESS。）

.placements {
    .placement {
        // Normal styling goes here

        &.selected {
            // Extra styles for selected items go here
        }
    }
}

Answer 3

您可以使用 params 哈希来检索 id，比较它们并将 css 类附加到 lis：

<ul>
<% Placement.all.each do |placement| %>
  <li class="<%= 'highlighted' if placement.id==params[:id] %>"><%= link_to placement.placementname, placement_path(placement.id)%> </li>
<%end%>
</ul>

和

<% @placement.ads.all.each do |ad| %>
    <li class="<%= 'highlighted' if ad.id==params[:id] %>"><%= link_to ad.adname, placement_ad_path(@placement, ad) %> </li>
<%end%>

然后在您的样式表中声明 CSS 类：

.highlighted{ background-color: #f00;} /* Whatever color fits your needs */