Question

我有一个局部的HTML菜单，我想根据我们所在的页面使菜单项动态（改变颜色）。我怎么能这样做？

谢谢

Answer 1

用于改变菜单外观以反映当前页面的常用技巧是在主体标记中放置反映页面名称的CSS选择器或类。

完成后，您可以为所需的每个页面名称变体创建不同的样式。

例如：

<!-- @page_name is 'home' in this example -->
<body class="<%= @page_name %>">

  <!-- Lots of html here -->

  <div class="nav_links">
    <ul id="nav">
      <li class="home"><a href="/"><span>Home</span></a></li>
      <li class="about_us"><a href="/about"><span>About us</span></a></li>
      <li class="store"><a href="/store"><span>Shop</span></a></li>
    </ul>
  </div>

然后CSS可以是你喜欢的任何东西，但是像：

body.home div.nav_links ul li.home { /* blah blah */ }
body.about_us div.nav_links ul li.about_us { /* blah blah */ }

此方法可确保关注点的良好分离：视觉样式（更改颜色）保留在样式表中，并且不在代码中。

Answer 2

创建帮助程序以生成菜单的html，并使用controller.controller_name变量更改类。

Answer 3

我遇到了同样的问题，我创建了辅助方法来设置活动菜单项。

  def active_tab(id)
    if id == menu_entry_id
      'active'
    else
      'tab'
    end
  end

  def menu_entry_id
    if controller_path.match('/')
      controller_path.gsub!('/', '_')
    else
      controller_path
    end
  end

示例菜单

%li{:class => "#{active_tab 'admin_dashboard'}"}= link_to 'Dashboard', admin_dashboard_path
%li{:class => "#{active_tab 'admin_customers'}"}= link_to 'Customers', admin_customers_path

正如您在active_tab中看到的，我传递了controller_path的预期结果（/替换为_）。 active_tab将其输入与controller_path的结果进行比较，并将其重新激活或仅选项卡。

我想可能还有其他方法可以做到，但我无法想出更好的东西。

Rails 3 - 动态菜单项

3 个答案: