首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >突出显示菜单中的选项卡

突出显示菜单中的选项卡
EN

Stack Overflow用户
提问于 2009-05-06 14:00:06
回答 5查看 7.7K关注 0票数 16

我有一个是ul的菜单。

代码语言:javascript
复制
Home | Calendar | Settings

我希望(通过css类)突出显示菜单中的选定选项卡。

某些链接(主页和日历)也有子选项

代码语言:javascript
复制
Home | *Calendar* | Settings 
------------------------- 
Add event | Edit event

当然,当选择编辑事件时,日历仍应突出显示。

我怎样才能最好地使用rails和css呢?

谢谢

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2009-05-06 15:11:56

最简单的方法是检查正在使用哪个控制器。我虚构了控制器的名称,所以您当然会用正确的名称替换“home”、“calendar”和“settings”。

代码语言:javascript
复制
<ul>
  <li class="<%= "highlighted" if params[:controller] == "home" %>">Home</li>
  <li class="<%= "highlighted" if params[:controller] == "calendar" %>">Calendar</li>
  <li class="<%= "highlighted" if params[:controller] == "settings" %>">Settings</li>
</ul>
票数 35
EN

Stack Overflow用户

发布于 2011-03-07 03:38:29

在帮助器文件中:

代码语言:javascript
复制
def is_active?(page_name)
  "active" if params[:action] == page_name
end

在模板文件中:

代码语言:javascript
复制
link_to 'Home', '/', :class => is_active?("index")
link_to 'About', '/about', :class => is_active?("about")
link_to 'contact', '/contact', :class => is_active?("contact")

我在http://juliocapote.com/post/52081481/highlight-link-based-on-current-page-in-rails上找到了这个

票数 19
EN

Stack Overflow用户

发布于 2012-10-11 20:28:41

我选择了这个我非常喜欢的解决方案:

在帮助器中

代码语言:javascript
复制
def active_if(options)
  if params.merge(options) == params
    'nav-active'
  end
end

并在视图中定义路由的独特之处:

代码语言:javascript
复制
<%= link_to 'Home', root_path, class: active_if(action: 'home') %>
<%= link_to 'Aricles', articles_path, class: active_if(controller: 'articles') %>
票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/829727

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档