어떻게 활성 링크를 표시 트위터 부트 스트랩 탐색을 얻으려면?

나는 트위터 부트 스트랩 탐색에 대한 활성 링크를 수행하는 방법을 이해하고 있지 않다. 나는 (연결 레일에 루비)과 같은 일반 네비게이션이있는 경우 :

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

어떻게하면 링크 클릭에 따라 활성 유지합니까?

해결법

==============================

1.그냥 여기에 바로 그 질문에 대답을했다 레일과 트위터 부트 스트랩 약 3.2.2

그냥 여기에 바로 그 질문에 대답을했다 레일과 트위터 부트 스트랩 약 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>

==============================

2.당신은 같은 것을 사용 (언급 @phil 것과 매우 유사,하지만 조금 짧은) 할 수 있습니다 :

당신은 같은 것을 사용 (언급 @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>

==============================
3.https://github.com/twg/active_link_to

https://github.com/twg/active_link_to
```
<%= active_link_to 'Users', users_path, :wrap_tag => :li %>
```
# =>
사용자

==============================

4.나는 레일 '폼 헬퍼의 스타일이 구현하는 도우미를 사용했다.

나는 레일 '폼 헬퍼의 스타일이 구현하는 도우미를 사용했다.

도우미에서 (예를 들어, 응용 프로그램 / 헬퍼 / 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

다음에, 뷰 (예를 들어, 애플리케이션 /보기 / 레이아웃 / 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>

==============================
5.서버 코드없이 현재 경로에 따라 탐색에 적극적으로 링크를 선택하는 대신에이 옵션을 사용합니다 :

서버 코드없이 현재 경로에 따라 탐색에 적극적으로 링크를 선택하는 대신에이 옵션을 사용합니다 :
```
    $(document).ready(function () {
        $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
    });
```

==============================

6.나는 성공 HAML에 (&&) 논리 및 사용을 발견했습니다 :

나는 성공 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

==============================

7.각 링크 :

각 링크 :

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

==============================
8.당신은 트위터 부트 스트랩 CSS를 사용하는 방법에 대해 물어, 또는 측면 레일하지 않도록합니다. 나는 레일 측을 믿고있어.

당신은 트위터 부트 스트랩 CSS를 사용하는 방법에 대해 물어, 또는 측면 레일하지 않도록합니다. 나는 레일 측을 믿고있어.

그렇다면하면 #link_to_if 방법 체크 아웃 또는 #link_to_unless_current 방법
==============================
9.오늘은하지만 솔루션에 대한 다른 접근 방식과 같은 질문 / 문제가 있었다. 나는 application_helper.rb의 도우미 함수를 만듭니다

오늘은하지만 솔루션에 대한 다른 접근 방식과 같은 질문 / 문제가 있었다. 나는 application_helper.rb의 도우미 함수를 만듭니다
```
def navMainAktiv(actionName)
    if params[:action] == actionName    
    "active"
    end
end
```
및 링크는 다음과 같습니다 :
```
<li class="<%= navMainAktiv('about')%>"><%= link_to "About", about_path %></li>
```
[: 액션] PARAMS하면 PARAMS 대체 할 수있다 [: 컨트롤러]과 링크 컨트롤러 이름을 설정합니다.
==============================
10.나는 각각의 리튬이를 사용 :

나는 각각의 리튬이를 사용 :
==============================
11.당신은 application_helper.rb에서 도우미 메서드를 정의 할 수 있습니다

당신은 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>
```
희망이 도움이!
==============================
12.당신은 CSS 클래스를 조작하여 스스로를해야한다. 즉, 어떤 링크를 사용자가 클릭하면, 무언가 (목표 행동), 설정 이전 링크 활성 또는 비활성 새로운 연결을한다.

당신은 CSS 클래스를 조작하여 스스로를해야한다. 즉, 어떤 링크를 사용자가 클릭하면, 무언가 (목표 행동), 설정 이전 링크 활성 또는 비활성 새로운 연결을한다.

귀하의 링크 (즉, 페이지를 다시로드합니다) 서버에 당신을 데려 갈 경우에, 당신은 단지 서버에 올바르게 활성 링크를 렌더링 할 수 있습니다. 일부 클라이언트 측 물건을하고 있다면 그렇지 않으면, (어떤 탭 창 또는 전환), 당신은 자바 스크립트를 사용해야합니다.
==============================
13.당신은 링크를 tabulous을 사용할 수 있습니다

당신은 링크를 tabulous을 사용할 수 있습니다

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

==============================

14.내가보기 도우미 CURRENT_PAGE에 빌드를 사용하여 간단한 도우미 메서드를 썼다? 당신은 html_options 해시에서 사용자 정의 클래스 이름을 지정할 수 있습니다 때.

내가보기 도우미 CURRENT_PAGE에 빌드를 사용하여 간단한 도우미 메서드를 썼다? 당신은 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>

==============================

15.답변의 대부분은 여기에 작동 것, 또는 부분적인 해답을 가지고있다. 나는이 도우미 방법 I 사용 레일 만드는 것들의 무리를 결합 :

답변의 대부분은 여기에 작동 것, 또는 부분적인 해답을 가지고있다. 나는이 도우미 방법 I 사용 레일 만드는 것들의 무리를 결합 :

# 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

그것은 LINK_TO 등에 지지체 블록 인수 검사 심지어 애호가 이루어질 수

==============================
16.이미, 그러나 여기에서 많은 대답은 내가 활성 링크 작업 부트 스트랩 아이콘을 얻기 위해 쓴 것입니다. 그것은 사람을 도움이 될 것입니다 희망

이미, 그러나 여기에서 많은 대답은 내가 활성 링크 작업 부트 스트랩 아이콘을 얻기 위해 쓴 것입니다. 그것은 사람을 도움이 될 것입니다 희망

이 헬퍼 당신을 줄 것이다 :

당신의 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'  %>
```
==============================
17.당신은 네비게이션 시스템을 구현해야처럼 소리. 이 복잡하면, 그것은 꽤 추한 꽤 빨리 얻을 수 있습니다.

당신은 네비게이션 시스템을 구현해야처럼 소리. 이 복잡하면, 그것은 꽤 추한 꽤 빨리 얻을 수 있습니다.

이 경우에, 당신은 그것을 처리 할 수있는 플러그인을 사용할 수도 있습니다. (이 일부 구성에 속해 뷰에서 주요 레이어를 유지하지 때문에 나는 navigasmic 추천 할 것입니다) 당신은 navigasmic 또는 단순 내비게이션을 사용할 수 있습니다

==============================

18.탐색 및 하위 탐색 목록 요소 모두이 거래. 당신은 배열 중 하나를 단일 경로를 전달할 수 있습니다 모두 처리됩니다.

탐색 및 하위 탐색 목록 요소 모두이 거래. 당신은 배열 중 하나를 단일 경로를 전달할 수 있습니다 모두 처리됩니다.

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

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

==============================
19.시나에 루비를 사용하여 ..

시나에 루비를 사용하여 ..

내가 부트 스트랩 베어 테마를 사용하고, 여기에 샘플 메뉴 바 코드입니다. 요소의 클래스 이름을 주 -> .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
```
보기 페이지에서 (또는 부분)이 추가 자바 스크립트를이 필요 때마다 페이지가로드를 실행합니다.

HAML보기 미리보기 ->
```
- content_for :javascript do
  :javascript
      $(function () {
          $.each($('.nav').find('li'), function() {
              $(this).toggleClass('active',
                  $(this).find('a').attr('href') == window.location.pathname);
          });
      });
```
자바 스크립트 디버거 메이크업에서 확인하면 window.location.pathname와 'HREF'속성 일치의 값을 갖는다. 이것은 내 문제를 해결 나에게 도움이 @Zitrax에 의한 솔루션보다 약간 다릅니다.

==============================

20.기본, 아니 도우미

기본, 아니 도우미

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

==============================
21.여기에 내가했던 일이야 :

여기에 내가했던 일이야 :

나는 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>
```

==============================

22.

  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

from https://stackoverflow.com/questions/9879169/how-to-get-twitter-bootstrap-navigation-to-show-active-link by cc-by-sa and MIT license

'RUBY-ON-RAILS' 카테고리의 다른 글

[RUBY-ON-RAILS] 내 코드에서 레일 개발 환경에 대한 ENV 변수를 설정할 수 있습니까? (0)	2020.02.10
[RUBY-ON-RAILS] 레이크 dB : 스키마 : 부하 대 마이그레이션 (0)	2020.02.10
[RUBY-ON-RAILS] 더 하나 개의 속성보다 find_or_create_by 레일? (0)	2020.02.10
[RUBY-ON-RAILS] 팝업으로 omniauth 페이스 북의 로그인을 돌려 (0)	2020.02.10
[RUBY-ON-RAILS] 레일 / lib에 모듈과 (0)	2020.02.10

복붙노트

[RUBY-ON-RAILS] 어떻게 활성 링크를 표시 트위터 부트 스트랩 탐색을 얻으려면?

어떻게 활성 링크를 표시 트위터 부트 스트랩 탐색을 얻으려면?

해결법

1.그냥 여기에 바로 그 질문에 대답을했다 레일과 트위터 부트 스트랩 약 3.2.2

2.당신은 같은 것을 사용 (언급 @phil 것과 매우 유사,하지만 조금 짧은) 할 수 있습니다 :

3.https://github.com/twg/active_link_to

4.나는 레일 '폼 헬퍼의 스타일이 구현하는 도우미를 사용했다.

5.서버 코드없이 현재 경로에 따라 탐색에 적극적으로 링크를 선택하는 대신에이 옵션을 사용합니다 :

6.나는 성공 HAML에 (&&) 논리 및 사용을 발견했습니다 :

7.각 링크 :

8.당신은 트위터 부트 스트랩 CSS를 사용하는 방법에 대해 물어, 또는 측면 레일하지 않도록합니다. 나는 레일 측을 믿고있어.

9.오늘은하지만 솔루션에 대한 다른 접근 방식과 같은 질문 / 문제가 있었다. 나는 application_helper.rb의 도우미 함수를 만듭니다

10.나는 각각의 리튬이를 사용 :

11.당신은 application_helper.rb에서 도우미 메서드를 정의 할 수 있습니다

12.당신은 CSS 클래스를 조작하여 스스로를해야한다. 즉, 어떤 링크를 사용자가 클릭하면, 무언가 (목표 행동), 설정 이전 링크 활성 또는 비활성 새로운 연결을한다.

13.당신은 링크를 tabulous을 사용할 수 있습니다

14.내가보기 도우미 CURRENT_PAGE에 빌드를 사용하여 간단한 도우미 메서드를 썼다? 당신은 html_options 해시에서 사용자 정의 클래스 이름을 지정할 수 있습니다 때.

15.답변의 대부분은 여기에 작동 것, 또는 부분적인 해답을 가지고있다. 나는이 도우미 방법 I 사용 레일 만드는 것들의 무리를 결합 :

16.이미, 그러나 여기에서 많은 대답은 내가 활성 링크 작업 부트 스트랩 아이콘을 얻기 위해 쓴 것입니다. 그것은 사람을 도움이 될 것입니다 희망

17.당신은 네비게이션 시스템을 구현해야처럼 소리. 이 복잡하면, 그것은 꽤 추한 꽤 빨리 얻을 수 있습니다.

18.탐색 및 하위 탐색 목록 요소 모두이 거래. 당신은 배열 중 하나를 단일 경로를 전달할 수 있습니다 모두 처리됩니다.

19.시나에 루비를 사용하여 ..

20.기본, 아니 도우미

21.여기에 내가했던 일이야 :

22.

'RUBY-ON-RAILS' 카테고리의 다른 글

티스토리툴바