현재 페이지 탐색_javascript 기술을 활성화하는 JavaScript 방법

이 기사의 예에서는 현재 페이지 탐색을 활성화하는 자바스크립트 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

html 부분(참조된 탐색, 링크 대신 #을 사용할 수 없음, 테스트용으로 여러 개의 새로운 정적 페이지를 생성할 수 있음)

<ul id="nav">
<li><a href="/">首页</a></li>
<li><a href="/category/html-css/">HTML/CSS</a></li>
<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 부분(현재 페이지의 지정된 탐색에 .on 클래스 추가)

$(function() {
var a1 = document.URL;
var a2 = $("#nav a");
for (var i = 0; i < a2.length; i++) {
if (a1.indexOf($(a2[i]).attr("href")) != -1) {
$(a2[i]).parent().addClass("on");
return;
}
}
$(a2[0]).parent().addClass("on");
})

css 부분(필요에 따라 조정 가능)

#nav li{
display:inline-block;
float:left;
text-align:center;
height:36px;
padding-left:4px;
line-height:36px;
background:url(images/nav.gif) no-repeat right bottom;
}
#nav li a{
display:block;
color:#777;
padding:0 15px 0 10px;
}
#nav li.on{
font-weight:bold;
background:url(images/nav.gif) no-repeat 0 0;
margin-left:-3px;
}
#nav li.on a{
background:url(images/nav.gif) no-repeat right 0;
}

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.