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

Question

在我的 Rails 应用程序中，我有这个导航栏，我想使用 CSS 或 jquery 突出显示当前选项卡，所以我想知道如何实现这一点？我没有使用 Bootstrap 选项卡或 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

在 View 上

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

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