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>

트위터 부트 스트랩 CSS가 어떻게 사용되는지 또는 레일 측에 대해 묻는 지 확실하지 않습니다. 나는 레일 쪽을 가정하고 있습니다.

그렇다면 #link_to_if방법 또는 #link_to_unless_current방법을 확인하십시오.

오늘 나는 동일한 질문 / 문제가 있었지만 솔루션에 대한 다른 접근 방식을 사용했습니다. application_helper.rb에 도우미 함수를 만듭니다.

def navMainAktiv(actionName)
    if params[:action] == actionName    
    "active"
    end
end

링크는 다음과 같습니다.

<li class="<%= navMainAktiv('about')%>"><%= link_to "About", about_path %></li>

당신은 대체 할 수 params[:action]와 함께 params[:controller]하고 링크에서 컨트롤러의 이름을 설정합니다.

나는 이것을 각각 사용합니다 li.

<li><%= link_to_unless_current('Home', root_path) { link_to('Home', root_path, class: 'active') } %></li>

도우미 메서드를 정의 할 수 있습니다. application_helper.rb

def create_link(text, path)
  class_name = current_page?(path) ? 'active' : ''

  content_tag(:li, class: class_name) do
    link_to text, path
  end
end

이제 다음과 같이 사용할 수 있습니다.

create_link 'xyz', any_path 다음과 같이 렌더링됩니다.

<li class="active">
  <a href="/any">xyz</a>
</li>

도움이 되었기를 바랍니다.

CSS 클래스를 조작하여 직접해야합니다. 즉, 사용자가 일부 링크를 클릭 한 다음 작업 (대상 동작)을 수행하고 이전 링크를 비활성화하고 새 링크를 활성화합니다.

링크가 서버로 이동하는 경우 (즉, 페이지를 다시로드) 서버에서 활성 링크를 올바르게 렌더링 할 수 있습니다. 그렇지 않으면 클라이언트 측 작업 (탭 창 전환 등)을 수행하는 경우 자바 스크립트를 사용해야합니다.

당신은 링크에 대해 표 를 사용할 수 있습니다

기사 여기에 트위터 부트 스트랩과 tabulous을 결합 및 3.x 레일하는 방법에

해시 에서 current_page?사용자 지정 class이름을 지정할 수있을 때 뷰 도우미에서 빌드를 사용하여 간단한 도우미 메서드를 작성했습니다 html_options.

def active_link_to(name = nil, options = nil, html_options = nil, &block)
  active_class = html_options[:active] || "active"
  html_options.delete(:active)
  html_options[:class] = "#{html_options[:class]} #{active_class}" if current_page?(options)
  link_to(name, options, html_options, &block)
end

예 ( root_path경유중인 경우) :

<%= active_link_to "Main", root_path %>
# <a href="/" class="active">Main</a>

<%= active_link_to "Main", root_path, class: "bordered" %>
# <a href="/" class="bordered active">Main</a>

<%= active_link_to "Main", root_path, class: "bordered", active: "disabled" %>
# <a href="/" class="bordered disabled">Main</a>

여기에있는 많은 답변에는 효과가 있거나 부분적인 답변이 있습니다. 이 레일 도우미 메서드를 만들기 위해 여러 가지를 결합했습니다.

# helper to make bootstrap3 nav-pill <li>'s with links in them, that have
# proper 'active' class if active. 
#
# the current pill will have 'active' tag on the <li>
#
# html_options param will apply to <li>, not <a>. 
#
# can pass block which will be given to `link_to` as normal. 
def bootstrap_pill_link_to(label, link_params, html_options = {})
  current = current_page?(link_params)

  if current
    html_options[:class] ||= ""
    html_options[:class] << " active "
  end

  content_tag(:li, html_options) do
    link_to(label, link_params)
  end      
end

&blocklink_to 등 을 지원하기 위해 인수 검사로 더 멋지게 만들 수 있습니다 .

이미 많은 답변이 있지만 여기에 내가 작성한 Bootstrap Icons가 활성 링크와 함께 작동합니다. 누군가를 도울 수 있기를 바랍니다

이 도우미는 다음을 제공합니다.

1. 사용자 정의 텍스트를 포함하는 링크가있는 li 요소
2. 선택적 Bootstrap3 아이콘
3. 오른쪽 페이지에있을 때 활성화됩니다.

이것을 application_helper.rb에 넣으십시오.

def nav_link(link_text, link_path, icon='')
  class_name = current_page?(link_path) ? 'active' : ''
  icon_class = "glyphicon glyphicon-" + icon

  content_tag(:li, :class => class_name) do
    (class_name == '') ? (link_to content_tag(:span, " "+link_text, class: icon_class), link_path)
    : (link_to content_tag(:span, " "+link_text, class: icon_class), '#')
  end
end

그리고 링크 사용 :

<%= nav_link 'Home', root_path, 'home'  %>

마지막 인수는 선택 사항입니다. 링크에 아이콘을 추가합니다. 글리프 아이콘의 이름을 사용합니다. 텍스트가없는 아이콘을 원하는 경우 :

    <%= nav_link '', root_path, 'home'  %>

내가 한 일은 다음과 같습니다.

ViewsHelper를 만들고 ApplicationController에 포함했습니다.

include ViewsHelper

ViewsHelper 내부에서 다음과 같은 간단한 방법을 만들었습니다.

def page_state(path)
  current_page?(path) ? 'active' : ''
end

내 관점에서 나는 이것을한다 :

<li class="<%= page_state(foobar_path) %>"><%= link_to 'Foobars', foobar_path %></li>

내비게이션 시스템을 구현해야하는 것 같습니다. 복잡하다면 아주 추하고 빠르게 될 수 있습니다.

이 경우이를 처리 할 수있는 플러그인을 사용할 수 있습니다. navigasmic 또는 간단한 탐색을 사용할 수 있습니다 (일부 구성이 아닌 뷰에 기본 레이어를 유지하기 때문에 navigasmic을 권장합니다)

가장 짧은 코드 

이것은 탐색 및 하위 탐색 목록 요소를 모두 다룹니다. 배열 중 하나에 단일 경로를 전달할 수 있으며 둘 다 처리합니다.

application_helper

# Active page method
def ap(p:);'active' if p.class == Array ? p.map{|m| current_page? m}.any? : (current_page? p) end

보기 (html.erb)

<ul class="nav navbar-nav">
  <li class="<%= ap p: home_path %>">Home</li>
  <li class="<%= ap p: account_path %>">Account</li>

  <li class="dropdown <%= ap p: [users_path, new_user_path] %>">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Users</a>
    <ul class="dropdown-menu" role="menu">
      <li class="<%= ap p: users_path %>">Users</li>
      <li class="<%= ap p: new_user_path %>">Add user</li>
    </ul>
  </li>
</ul>

Sinatra에서 루비 사용 ..

부트 스트랩 베어 테마를 사용하고 있습니다. 여기 샘플 navbar 코드가 있습니다. 요소의 클래스 이름-> .nav-이것은 자바 스크립트에서 참조됩니다.

/ Collect the nav links, forms, and other content for toggling
    #bs-example-navbar-collapse-1.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li
          %a{:href => "/demo/one"} Page One
        %li
          %a{:href => "/demo/two"} Page Two
        %li
          %a{:href => "/demo/three"} Page Three

보기 페이지 (또는 부분)에서 다음을 추가하십시오. : javascript, 페이지가로드 될 때마다 실행되어야합니다.

haml보기 스 니펫->

- content_for :javascript do
  :javascript
      $(function () {
          $.each($('.nav').find('li'), function() {
              $(this).toggleClass('active',
                  $(this).find('a').attr('href') == window.location.pathname);
          });
      });

자바 스크립트 디버거에서 'href'속성 값이 window.location.pathname과 일치하는지 확인하세요. 이것은 내 문제를 해결하는 데 도움이 된 @Zitrax의 솔루션과 약간 다릅니다.

기본, 도우미 없음

<%= content_tag(:li, class: ('active' if request.path == '/contact')) do %>
    <%= link_to 'Contact', '/contact' %>
<% end %>

나는 하나 이상의 수업이 있기 때문에 이것을 사용합니다.

<%= content_tag(:li, class: (request.path == '/contact' ? 'active black' : 'black')) do %>
    <%= link_to 'Contact', '/contact' %>
<% end %>

  def active_navigation?(controllers_name, actions_name)
   'active' if controllers_name.include?(controller_name) && actions_name.include?(action_name)
  end

날씬한

li class=(active_navigation?(['events'], ['index', 'show'])) = link_to t('navbar.events'), events_path