使用 CSS 突出显示 Ruby on Rails 上的当前链接/选项卡

【问题标题】：Highlight current link/tab on Ruby on Rails using CSS使用 CSS 突出显示 Ruby on Rails 上的当前链接/选项卡
【发布时间】：2015-02-19 23:41:12
【问题描述】：

在我的 Rails 应用程序中，我有这个导航栏，我想使用 CSS 或 jquery 突出显示当前选项卡，所以我想知道如何实现这一点？我没有使用引导选项卡或 jquery UI 选项卡。

这是我的代码

  <div class="jm_bar jm_filter">
   <%= link_to "Approved", dashboard_jobs_path(sort_by: 'Approved')%>
    <span class="separator"></span>
    <%= link_to "Awaiting", dashboard_jobs_path(sort_by: 'Awaiting') %>
    <span class="separator"></span>
    <%= link_to "Pending", dashboard_jobs_path(sort_by: 'Rejected') %>
    <span class="separator"></span>
  </div>

【问题讨论】：

查看 :target developer.mozilla.org/en-US/docs/Web/CSS/:target 这个伪类选择器可以让你在元素的 id 属性匹配 url 时以不同的方式设置元素。

标签： css ruby-on-rails ruby-on-rails-4

【解决方案1】：

如果你还在搜索这个？我不这么认为，我正在为像我这样的 RoR 开发人员写一个答案，因为我遇到过这个问题，现在我已经解决了。

创建辅助方法

def tab_link(link_text, link_path)
    class_name = current_page?(link_path) ? 'active' : ''

    content_tag(:li, :class => class_name) do
        link_to link_text, link_path
    end
end

在视图中

<ul>
  <%= tab_link("Approved", dashboard_jobs_path(sort_by: 'Approved')) %>
  <%= tab_link("Awaiting", dashboard_jobs_path(sort_by: 'Awaiting')) %>
  <%= tab_link("Pending", dashboard_jobs_path(sort_by: 'Rejected')) %>
</ul>

活动类 CSS

.active > a, 
.active > a:focus, 
.active > a:hover {
    border-color: #1558e7;
    background-color: #1558e7;
    color: #fff;
}

现在你的标签链接看起来像这样

【讨论】：