내비게이션 메뉴바에서 해당 메뉴를 클릭하여 페이지를 이동해도 메뉴바에 걸려있는 효과를 계속 유지하는 방법좀 알려주세요...

조회수 3603회
<head>
<meta charset="utf-8">
<title>the next 내비제작</title>
<style>
* { margin:0; padding:0; }
li { list-style:none; }
a { text-decoration:none; }
img { border:none; }

header { text-align:center; position:fixed; top:0; left:0; background:#fff; width:100%; padding:20px 0; }
header h1 { color:#006; }

nav { border-top:1px solid #ccc; border-bottom:3px solid #ccc; height:40px; overflow:hidden; position:fixed; width:100%; background:rgba(255,255,255,0.8);  }
nav  > div { border-bottom:1px solid #ccc; height:40px; }
nav #gnb { width:960px; margin:0 auto; }
nav #gnb:after { content:""; clear:both; display:block; height:0; visibility:hidden; }
nav #gnb > li { float:left; text-align:center; width:137px;  }
nav #gnb > li:last-child { margin-right:0; }
nav #gnb > li a { display:block; height:40px; line-height:40px;  }
nav #gnb > li > a:link, nav #gnb > li > a:visited { color:#333; font-weight:bold; font-size:18px; }
nav #gnb > li > a:hover, nav #gnb > li > a:active, nav #gnb > li > a:focus, nav #gnb > li > a.select { background:#069; color:#fff; }
nav #gnb ul li a:link, nav #gnb ul li a:visited { color:#666; } 
nav #gnb ul li a:hover, nav #gnb ul li a:active, nav #gnb ul li a:focus { background:#eee; }

section { text-align:center; height:500px; background:#ffc; }
#cont1 { text-align:center; height:500px; background:#fcf; }
#cont2 { text-align:center; height:500px; background:#ccf; }
#cont3 { text-align:center; height:500px; background:#cff; }

</style>
</head>

<body>
<header>
    <h1>LOGO</h1>
</header>
<nav>
    <div>
    <ul id="gnb">
        <li>
            <a href="#cont1">MENU1</a>
            <ul>
                <li><a href="#">SUB1-1</a></li>
                <li><a href="#">SUB1-2</a></li>
                <li><a href="#">SUB1-3</a></li>
                <li><a href="#">SUB1-4</a></li>
            </ul>
        </li>
        <li>
            <a href="#cont2">MENU2</a>
            <ul>
                <li><a href="#">SUB2-1</a></li>
                <li><a href="#">SUB2-2</a></li>
                <li><a href="#">SUB2-3</a></li>
                <li><a href="#">SUB3-4</a></li>
            </ul>
        </li>
        <li>
            <a href="#cont3">MENU3</a>
            <ul>
                <li><a href="#">SUB3-1</a></li>
                <li><a href="#">SUB3-2</a></li>
            </ul>
        </li>
        <li>
            <a href="#">MENU4</a>
            <ul>
                <li><a href="#">SUB4-1</a></li>
                <li><a href="#">SUB4-2</a></li>
            </ul>
        </li>
        <li>
            <a href="#">MENU5</a>
            <ul>
                <li><a href="#">SUB5-1</a></li>
                <li><a href="#">SUB5-2</a></li>
                <li><a href="#">SUB5-3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">MENU6</a>
            <ul>
                <li><a href="#">SUB6-1</a></li>
            </ul>
        </li>
        <li>
            <a href="#">MENU7</a>
            <ul>
                <li><a href="#">SUB7-1</a></li>
            </ul>
        </li>
    </ul>
    </div>
</nav>
<section>
    <img src="http://placehold.it/960x300" width="960" height="300" alt="임시이미지">
</section>
<section id="cont1">
</section>
<section id="cont2">
</section>
<section id="cont3">
</section>
<script src="js/jquery-1.11.1.min.js"></script>
<script>

$("#gnb > li > a").on("mouseover focus",function(){
    $(this).next().stop().animate({"height":160},300);
});
$("#gnb > li > a").on("mouseleave focusout",function(){
    $(this).next().stop().animate({"height":40},300);
});
$("#gnb ul li a").on("mouseover focus",function(){
    $(this).parents("nav").stop().animate({"height":200},300);  
    $(this).parents("ul").prev("a").addClass("select");
});
$("#gnb ul li a").on("mouseleave focusout",function(){
    $(this).parents("nav").stop().animate({"height":40},300);
    $(this).parents("ul").prev("a").removeClass();
});
/*
$("#gnb > li").on("mouseover focus",function(){
    $("nav").stop().animate({"height":200},300);
    $(this).children("a").addClass("select");
});
$("#gnb > li").on("mouseleave focusout",function(){
    $("nav").stop().animate({"height":40},300);
    $(this).children("a").removeClass();
});
*/
</script>
</body>

링크 이동을 하지 않는 내비게이션 메뉴들은 클릭을 하면 해당 메뉴의 배경과 글자색상이변한 상태로 유지되는 반면에

아래페이지로 이동 하는 링크를 걸어 놓은 내비게이션 메뉴는 클릭하면 해당 페이지로 이동한 뒤에 배경과 글자색상이 변한 상태가 유지되지 않습니다.

페이지를 이동해도 이러한 효과가 유지되도록 하는 좋은 방법을 알려주세요 ㅠㅠ

  • (•́ ✖ •̀)
    알 수 없는 사용자

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)