[페이지인식] 간단한 페이지 인식 소스 (인클루드 상태일때)

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

퍼블리셔 초보인 저는 이것을 찾느라 엄청 한참 헤맸습니다ㅜㅜ

인터넷을 뒤져보아서 body에 id값을 줘서 인식하는 방법을 찾긴 했지만.

gnb 메뉴가 있는 header부분을 인클루드해오는 방식의 사이트를 만들었기 때문에

더더욱 어려운 일이었습니다.

gnb 메뉴가 인클루드 되어있으면 body가 인클루드에 포함되어 있기 때문에 불가능했죠.

 

그러다가 제이쿼리 스크립트로 찾아서 표시를 해줘야 겠단 생각이 들어서

기초적인 언어로... 만들어봤습니다. (스크립트를 아시는 분들이 보면 너무 기초적인 방법이라서 황당 하실 수도 있겠지만..

저는 퍼블리셔 초보였기 때문에ㅜㅜ 저같은 고민을 하고 계신 분들을 위해 올려봅니다.)

 

 

○ li에 on클래스 추가하는 방법

일단 제이쿼리 파일은 로드 한 상태여야겠죠?

그리고 gnb메뉴를 마크업 해줍니다. 이 부분은 header 파일 안에 들어가 있겠죠? (인클루드 되는 파일)

 

<style>

#gnb li {width:100px; height:30px; color:darkgray;}

#gnb li.on {color:red; font-wieght:bold} /* 활성화 되었을때 스타일 */

</style> 

<ul id="gnb">
    <li>
        <a href="#">menu1</a>
    </li>
    <li>
        <a href="#">menu2</a>
    </li>
    <li>
        <a href="#">menu3</a>
    </li>
    <li>
        <a href="#">menu4</a>
    </li>
    <li>
        <a href="#">menu5</a>

 

</li>

</ul>

 

 

그리고 이제 각 페이지마다 스크립트 소스를 넣어줍니다.

페이지 마다 그에 맞는 숫자만 변경 해 주시면 됩니다.

 

<!-- 페이지인식 --> 
<script type="text/javascript">

$(document).ready(function(){
    $('#gnb').children().eq(0).addClass('on');

// #gnb에 자식 요소(li)가 몇번째인지를 확인한 후 on이라는 클래스 추가

});
</script>

 

★ 여기서 주의 할 점은 eq(0) 부터 시작된다는 것입니다.

그러니까 첫번째 메뉴에 on클래스를 주고싶으면 eq(0)이 되는것이고

세번째 메뉴에 on클래스를 추가하고 싶으면 eq(2)가 되는 것이죠.

위에 예제로 나와있는 스크립트 소스는 eq(0)이므로 첫번째 메뉴가 활성화 되어있는 페이지에 넣어주시면 됩니다.

 

 

 ○ a요소에 스타일을 줘서 on클래스 추가하는 방법

li에 스타일을 주지 않고 그안에 자식요소인 a요소에 스타일을 주고 싶을때 방법입니다.

 

<style>

#gnb li a{display:block; width:100px; height:30px; color:darkgray;}

#gnb li a.on {color:red; font-wieght:bold} /* 활성화 되었을때 스타일 */

</style> 

<ul id="gnb">
    <li>
        <a href="#">menu1</a>
    </li>
    <li>
        <a href="#">menu2</a>
    </li>
    <li>
        <a href="#">menu3</a>
    </li>
    <li>
        <a href="#">menu4</a>
    </li>
    <li>
        <a href="#">menu5</a>

 

</li>

</ul>

 

 

스크립트 소스입니다. 

 

<!-- 페이지인식 --> 

<script type="text/javascript">
$(function(){
    $('#gnb').children().eq(1).find('a').addClass('on');

// #gnb의 자식 엘리먼트(li)가 몇번째인지 확인한 후 a요소를 찾은 후 on이라는 클래스 추가

});
</script>

 

이상 허접한 페이지 인식 소스 였습니다..^-^;;

저도 공부하는 입장이기 때문에 아주 기초적인 명령어만 가지고 썼습니다..