레일즈 + 자바 스크립트 : 현재 페이지에 따라 굵은 메뉴 링크

Question

다른 페이지를 대상으로하는 일반 html 링크가있는 간단한 탐색 메뉴가 있습니다. 이 모든 페이지는이 메뉴를 공유하며 부분적으로 분리되어 있습니다.

현재 페이지의 링크를 굵게 강조하고 싶습니다. 내 (비 작동) 구현의 일반 버전은 다음과 같습니다 :이 끔찍한 구현 인 경우, 나는 그것을 개선에 어떤 도움을 주셔서 감사합니다 것

# 'pagetwo' view 
<% @bold = "pagetwo" %> 
<%= render :partial => "shared/nav" %> 

# partial 
<%= link_to "Home", home_url, :id => "home" %> 
<%= link_to "Page 1", pageone_url, :id => "pageone" %> 
<%= link_to "Page 2", pagetwo_url, :id => "pagetwo" %> 

<% if @bold.present? %> 
    <script> 
    document.getElementById('<%= @bold %>').bold(); 
    </script> 
<% end %> 

- 그것은 거대하게이 일을 수행하는 방법에 대한 이해를 향상시킬 수 미래에. 물론, 위의 코드가 제대로 작동하지 않는 작은 문제가 있습니다!

주 - script 태그는 올바른 값으로 표시됩니다. 실제로 텍스트를 굵게 표시하지는 않습니다.

주 2 가능한 경우 솔루션에 JQuery/Prototype을 사용하지 마십시오.

---

link_to_unless_current 제안이 작동하는 것처럼 보입니다. 누구든지이 방법을 사용하여 각 결과에 다른 CSS 클래스를 할당하는 방법을 알고 있습니까?

Answer 1

여기 제가 찾은 해결책은 제가 아직 보지 못한 것입니다. @thatothermitch (감사합니다 +1)가 제공 한 답변을 기반으로합니다.

내가 즉

# partial 
<div id="manage_list"> # already surrounds the entire partial 
    <%= link_to_unless_current "Home", home_url, :id => "home" %> 
    <%= link_to_unless_current "Page 1", pageone_url, :id => "pageone" %> 
    <%= link_to_unless_current "Page 2", pagetwo_url, :id => "pagetwo" %> 
</div> 

, 모든 링크에 대한 link_to_unless_current을 사용 그때 CSS 상기 <a> 태그가 존재하는지 여부에 픽업 스타일 추가 :

#manage_list p{ font-weight:bold; } 
#manage_list p a{ font-weight:normal; } 

이 방법을, 필요에가 없습니다 변수를 전달하거나, 자바 스크립트를 작성하거나, 도우미를 추가 할 수 있습니다.

같은 문제가 발생하는 다른 사용자에게 도움이되기를 바랍니다.:)

Answer 2

는 페이지 요청 사이의 링크의 담대함을 변경해야하지 않는 한 (즉, 클라이언트 측 이벤트에 대한 응답으로), 당신은보다 일반적인 솔루션을, link_to_unless_current의 블록 양식을 사용하거나으로 보일 수 있습니다, current_page?

조사

또 다른 옵션은 현재 페이지를 기반으로 본문 (또는 유사한 컨테이너 요소)에 클래스를 추가 한 다음 CSS 규칙을 특정 컨텍스트의 대상 링크에 쓰는 것입니다. 예를 들어 :

body.home a#home_link { font-weight: bold } 
body.about a#about_link { font-weight: bold } 

Answer 3

당신은 클래스 이름

<%= link_to "Home", home_url, :id => "home", :class => set_selected({:controller => 'homes', :action => 'index'}) %> 
<%= link_to "Page 1", pageone_url, :id => "pageone", :class => set_selected({:controller => 'page_ones', :action => 'index'}) %> 

를 설정 도우미를 호출 응용 프로그램 도우미에서이에게 간단한 도우미

을이

def set_selected(url_hash) 
    current_page?(url_hash) ? "current" : "" 
end 

귀하의 링크를 넣어 할 수

current 클래스의 CSS 정의는 application.css 또는 기타 클래스에 들어갑니다. 귀하의 응용 프로그램에있는 CSS 파일

.current{ 
    font-weight:bold; 
}