jQuery를 활용한 menu 자동 active 하기

jQuery를 활용한 menu 자동 active 하기

간혹 우리는 메뉴기능을 쓸때 현재 위치를 자동적으로 선택하여 보여줄필요가 있을때가 있다. 

그럴 경우에 아래와 같은 형태로 작업을 하면 가능하다

<script src="//code.jquery.com/jquery.min.js"></script> 

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery.min.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<style>

.active {font-size:30px;}

</style>

<div class="menu">

<ul>

<li><a class="" href="index.html">home</a>

<li><a class="" href="1.html">LINK 1</a>

<li><a class="" href="2.html">LINK 2</a>

<li><a class="" href="3.html">LINK 3</a>

</ul>

3page

</div>

<script>

$(function () {

        var url = window.location.pathname,

    urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");  

        $('a').each(function () {

                            if (urlRegExp.test(this.href.replace(/\/$/, ''))) {

                $(this).addClass('active');

            }

        });

    });

</script>

핵심은 스크립트 내용 구분이다.

해당 스크립을 통해 현재 위치를 확인하고 해당 위치에 따른 메뉴에 active 클래스를 부여함으로써 현재 위치를 확인할수있다.