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

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

这是我的密码

  <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>

---

如果您仍在搜索此项？我不这么认为，我正在为像我这样的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>

现在您的选项卡链接如下所示

---

签出

：target

当元素的id属性与url匹配时，此psuedo类选择器将允许您以不同的方式设置元素的样式。

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