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

Question

在我的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>

Answer 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;
}

现在，您的标签链接如下所示