이 기사에서는 현재 페이지 탐색 활성화를 구현하기위한 JavaScript 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 세부 사항은 다음과 같습니다.
html part (참조 탐색, 사용할 수 없음 # 링크 대신 # 테스트는 여러 개의 새 정적 페이지를 만들 수 있음)
<ul id = "nav"> <li> <a href = "/"> home </a> </li> <li> <a href = "/category/html-css/"> html/css </a> <li> <a href = "/category/javascript/"> javascript </a> </li> <li> <a href = "/category/seo/"> seo </a> </li> <li> <a href = "/category/front-end/"> 프론트 엔드 뉴스 </a> </li> </ul>
JavaScript Part (class가 추가 된 현재 페이지의 탐색 지정)
$ (function () {var a1 = document.url; var a2 = $ ( "#nav a"); for (var i = 0; i <a2.length; i ++) {if (a1.indexof ($ (a2 [i]). art ( "href"))! = -1) {$ (a2 [i]). parent (). addClass ( "on"); return;}} $ (a2 [0]). parent (). addClass ( "on");})CSS 부품 (필요에 따라 관련 조정을 수행 할 수 있습니다)
#Nav li {display : inline-block; float : left; 텍스트-정렬 : 중심; 높이 : 36px; 패딩-왼쪽 : 4px; 선-하이드 : 36px; 배경 : url (images/nav.gif) no-repeat 오른쪽 하단;}#nav li a {display : block;#777; 패딩 : 0 15px 0 10px;}# li.on {font-weight : bold; background : url (images/nav.gif) no-Repeat 0 0; margin-left : -3px;}#nav li. {background : url (images/nav.gif) no-Repeat right 0;}이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.