Superfish jquery plugin, 선택된 메뉴 항목 강조 표시

Question

superfish 플러그인을 사용할 때 현재 선택된 메뉴를 강조 표시하는 데 사용할 수있는 "하드 코드되지 않은"방식이 무엇일까 궁금합니다.

예를 들어이 하나의 http://hicksdesign.co.uk/journal/highlighting-current-page-with-css은 매우 "하드 코드 된 방식"으로보고 있습니다.

일부 스마트 폰을 제안 할 수 있습니까?

Answer 1

동적 언어를 사용하여 페이지를 렌더링하지 않는 한 불행히도 이러한 문제에 대해 깔끔하고 깔끔한 해결책을 제공하는 것은 어렵습니다.

앵커의 href 속성은 window.location.pathname 문자열의 일부와 같을 수 있습니다.

예를 들어, 귀하의 사이트가 index.html라는 HTML 페이지, work.html 등 그런 다음 pathname (도메인 이름 다음에 URL의 부분을) 잡아 수로, 서버의 루트에 있다고 가정하고에 일치 앵커의 href 속성

<nav> 
    <ul> 
    <li><a href="index.html">Index</a></li> 
    <li><a href="work.html">Work</a></li> 
    <li><a href="projects.html">Projects</a></li> 
    <li><a href="hobbies.html">Hobbies</a></li> 
    <li><a href="contact.html">Contact</a></li> 
    </ul> 
</nav> 

을 그리고 당신의 자바 스크립트는 다음과 같이 수 :

탐색은 다음과 같이 할 수

var pathname = window.location.pathname; 
// trim the first slash 
var substr = pathname.substr(1); 
$('nav').find('li a[href="' + substr + '"]').addClass('current'); 

당신이 index.html에있어 때, 변수 substr 때문에, index.html 같다 data-page-name이 index.html 인 목록 항목은 클래스 current이됩니다.

요소에 ID 또는 클래스를 추가 할 때 페이지마다을 편집 할 필요가 없으므로이 솔루션은 하나의 탐색 트리 만 있으면됩니다. do모든 파일에서 data-page-name 속성을 변경해야하기 때문에 파일 이름을 변경하면 혼란에 빠지게됩니다. 그래도 앵커는 href으로 변경해야합니다.

Answer 2

이것은 내가 일반적으로하는 방법입니다 - 마지막 페이지/URL 뒤에 현재 페이지를 가져 와서 일치하는 링크를 강조 표시하십시오. 예. 이 페이지는 대신에 '활성'클래스를 추가하는 superfish-jquery-plugin-highlight-selected-menu-item

var path = location.pathname.substring(location.pathname.lastIndexOf("/") + 1); 
$('ul#main-navigation li a[href="' + path + '"]').addClass('active');