[ruby-on-rails] Twitter-Bootstrap 탐색을 통해 활성 링크를 표시하는 방법은 무엇입니까?

Twitter Bootstrap이 탐색을 위해 활성 링크를 수행하는 방법을 이해하지 못합니다. 다음과 같은 일반 내비게이션이있는 경우 (레일 연결에 루비 포함) :

<ul class="nav">
  <li class="active"> <a href="/link">Link</a> </li>
  <li class=""> <a href="/link">Link</a> </li>
  <li class=""> <a href="/link">Link</a> </li>        
</ul>

클릭 한 링크를 기반으로 활성 상태를 유지하려면 어떻게합니까?

답변

여기에서 바로 동일한 질문에 대한 답변을했습니다.
Twitter Bootstrap Pills with Rails 3.2.2

<ul class="nav">
  <li class="<%= 'active' if params[:controller] == 'controller1' %>"> <a href="/link">Link</a> </li>
  <li class="<%= 'active' if params[:controller] == 'controller2' %>"> <a href="/link">Link</a> </li>
  <li class="<%= 'active' if params[:controller] == 'controller3' %>"> <a href="/link">Link</a> </li>        
</ul>

답변

다음과 같은 것을 사용할 수 있습니다 (@phil이 언급 한 것과 매우 유사하지만 조금 더 짧음).

<ul class="nav">
  <li class="<%= 'active' if current_page?(root_path) %>"><%= link_to "Home", root_path %></li>
  <li class="<%= 'active' if current_page?(about_path) %>"><%= link_to "About", about_path %></li>
  <li class="<%= 'active' if current_page?(contact_path) %>"><%= link_to "Contact", contact_path %></li>
</ul>

답변

https://github.com/twg/active_link_to

<%= active_link_to 'Users', users_path, :wrap_tag => :li %>

#=> <li class="active"><a href="https://stackoverflow.com/users">Users</a></li>

답변

나는 이것을 Rails의 폼 헬퍼 스타일로 구현하기 위해 헬퍼를 사용했다.

도우미에서 (예 🙂 app/helpers/ApplicationHelper.rb:

def nav_bar
  content_tag(:ul, class: "nav navbar-nav") do
    yield
  end
end

def nav_link(text, path)
  options = current_page?(path) ? { class: "active" } : {}
  content_tag(:li, options) do
    link_to text, path
  end
end

그런 다음보기 (예 :)에서 app/views/layouts/application.html.erb:

<%= nav_bar do %>
  <%= nav_link 'Home', root_path %>
  <%= nav_link 'Posts', posts_path %>
  <%= nav_link 'Users', users_path %>
<% end %>

이 예는 다음을 생성합니다 ( ‘사용자’페이지에있는 경우).

<ul class="nav navbar-nav">
  <li><a href="/">Home</a></li>
  <li><a href="/posts">Posts</a></li>
  <li class="active"><a href="/users">Users</a></li>
</ul>

답변

대신 이것을 사용하여 서버 코드가없는 현재 경로를 기반으로 탐색에서 활성 링크를 선택하십시오.

    $(document).ready(function () {
        $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
    });

답변

haml 에서 논리적 및 ( &&)를 사용하여 성공 했습니다 .

%ul.nav
  %li{class: current_page?(events_path) && 'active'}
    = link_to "Events", events_path
  %li{class: current_page?(about_path) && 'active'}
    = link_to "About Us", about_path

답변

각 링크에 대해 :

<% if current_page?(home_path) -%><li class="active"><% else -%><li><% end -%>
  <%= link_to 'Home', home_path %>
</li>

또는

<li <% if current_page?(home_path) -%>class="active"<% end -%>>
  <%= link_to 'Home', home_path %>
</li>