jQuery를 사용하여 현재 URL을 기반으로 활성 메뉴 항목 설정

이 문제는 웹 사이트를 구축 할 때 계속해서 나타납니다. 탐색 메뉴에서 활성 섹션을 강조 표시 할 수 있도록 사용자의 현재 위치를 어떻게 확인합니까? 기본적인 요구 사항이지만 새로운 빌드마다 솔루션이 재창조되는 것 같습니다.

이 문제를 동적 방식으로 해결할 때 취할 수있는 두 가지 주요 경로, 즉 서버 측과 클라이언트 측이 있습니다. 요청되는 페이지를 더 잘 처리 할 수 ​​있기 때문에 서버 측에서이 문제를 해결하는 것이 좋지만 항상 실용적인 것은 아닙니다. 약간의 계획 만 있으면 JavaScript (및 선택적으로 jQuery)를 사용하여 클라이언트 측에서이 문제를 해결하는 것은 매우 간단합니다.

헤더에 기본 탐색 메뉴가 있고 현재 페이지의 배경색을 변경한다고 가정 해 보겠습니다.

이상적으로 투어를 클릭하고 투어 페이지로 이동하면 메뉴에 현재 위치가 반영되기를 원합니다.

jQuery를 사용하여이를 수행하기 위해 각 메뉴 링크의 href 속성을 현재 브라우저 URL과 비교하고 일치하는 항목을 찾으려고합니다. 일치하는 항목이 있으면 클래스를 추가하여 해당 요소를 활성으로 설정합니다.

  • 요소.

    이 매우 기본적인 예제의 최종 결과는 다음과 같습니다.

    모든 페이지가로드 될 때마다이 스크립트는 각 메뉴 링크의 href를 도메인 이름 뒤에서 시작하여 href에 존재하는만큼의 문자만큼 앞으로 계속 진행하는 현재 페이지 URL에 비교합니다 (startsWith () 함수와 유사). 이렇게하면 "Tour"의 모든 하위 페이지에서 Tour를 활성 섹션으로 표시 할 수도 있습니다 (예 : /tour/section2.html). 일치하는 항목이 발견되면 상위 요소-이 경우

  • - "활성"클래스가 추가되었습니다.

    이 솔루션은 jsFiddle에서 찾을 수 있으며 아래에도 포함되어 있습니다. 필요에 따라 변경해야하는 주요 사항은 JavaScript의 9 행에있는 ".nav"선택기입니다. 처리 할 탐색 요소를 선택하려면 수정해야합니다.

    jsFiddle 예제는 결과 창에서 실제로 URL을 변경할 수 없기 때문에 작동하지 않지만 코드를 HTML 파일에 쉽게 복사하여 테스트 할 수 있습니다.