[페이지인식] 페이지 인식소스 업그레이드 버전

웹사이트 코딩을 할 때, 현재 페이지가 어느 위치에 속해 있는지 메뉴에 표시를 해주고 싶을 때가 있다.

예전에 블로그에 쓴 글은 각 페이지마다 jquery 스크립트를 넣어 일일이 eq값을 입력해서 on class를 붙여주는 방식이었는데..

지금 생각해보면 매우 비효율 적인 방법..

 

이번에는 자동으로 페이지 location 값을 가져와서 on class를 붙여주는 방법을 써보겠다.

물론 인클루드 상태일 때도 가능하다. 공통 스크립트 파일에 스크립트를 한번만 넣어주면 됨.

 

html 마크업 예시

<ul class="sidebar-menu">
    <li><a href="/sub1/submenu1.html">메뉴1</a></li>
    <li><a href="/sub1/submenu2.html">메뉴2</a></li>
    <li><a href="/sub2/submenu1.html">메뉴3</a></li>
    <li><a href="/sub2/submenu2.html">메뉴4</a></li>
</ul>

 

on 클래스 스타일을 만들어주고..

.sidebar-menu li {width:100px; height:30px; color:darkgray;}
.sidebar-menu li.on {color:red; font-wieght:bold} /* 활성화 되었을때 스타일 */

 

jquery 스크립트는 아래와 같다. (공통 스크립트 파일에 넣어주면 됨)

// 페이지 인식
var pageLocation = String(document.location).split('/');
fileName = pageLocation[pageLocation.length-1];
fileDoc = pageLocation[pageLocation.length-2];

// Activate current nav item
$('.sidebar-menu').find('li > a[href="/' + fileDoc + '/' + fileName + '"]').parent().addClass('on');

 

설명을 하자면,

현재의 페이지 주소가 http://ㅇㅇㅇ.com/sub1/submenu1.html 이라면

/ 단위로 단어를 잘라주고 배열로 만들어서

sub1은 fileDoc이 되고

submenu1.html은 fileName이 됨.

 

페이지 주소와 a tag의 href값이 일치하는 것을 찾아 그 부모(li) 엘리먼트에 on class를 넣어주는 스크립트이다.