Liangchao's blog
一个技术商人的笔记
github
|
email
Toggle navigation
Liangchao's blog
主页
归档
关于我
津ICP备17001227号
Rails-菜单按钮按页面url动态 active
2018-03-08 13:46:57
294
0
0
liangchaob@163.com
# 摘要 在构建页面时候,按钮按照路由动态切换 active 是最常见的一种情况,这种其实只要做一个 helper 用来检测link_to当前 url 是否匹配,匹配就将样式设置成 active 就可以了. 这个具体实现有两种方法,特色不同,效果也略有区别: https://apidock.com/rails/ActionView/Helpers/UrlHelper/current_page%3F - 检测 path,如果不需要子页面继续还 active 用这种模式比较简单. - 检测 controller,,如果要子页面继续还 active 用这种模式可以实现下级依旧用这个 active # 检测 url 先设置一个 helper 如果是当前页就 active `app/helpers/application_helper.rb` ``` # link_to 按钮动态 active def active_class(link_path) current_page?(link_path) ? "active" : "" end ``` 然后在 link_to 的 class 中按需出现 ``` <div class="list-group"> <%= link_to('用户管理',admin_users_path, class: "list-group-item "+active_class(admin_users_path) ) %> <%= link_to('团队管理',admin_teams_path, class: "list-group-item "+active_class(admin_teams_path)) %> </div> ``` # 检测 controller 先设置一个 helper 如果是当前页就 active `app/helpers/application_helper.rb` ``` # link_to 按钮动态 active def active_class(controller_name) controller.controller_name == controller_name ? "active" : "" end ``` 然后在 link_to 的 class 中按需出现 ``` <div class="list-group"> <%= link_to('用户管理',admin_users_path, class: "list-group-item "+active_class('users') ) %> <%= link_to('团队管理',admin_teams_path, class: "list-group-item "+active_class('teams')) %> </div> ```
上一篇:
Rails-Gem-使用 avatar_magick 生成 gmail 头像效果
下一篇:
Rails-ajax 搜索与 bootstrap-select 协同
0
赞
294 人读过
新浪微博
微信
腾讯微博
QQ空间
人人网
提交评论
立即登录
, 发表评论.
没有帐号?
立即注册
0
条评论
More...
文档导航
liangchaob@163.com
没有帐号? 立即注册