헤더메뉴에서 클릭된 a태그만 컬러를 바꿔주고 싶습니다.
페이지마다 다르게 컬러를 주면 되겠지만 그것보다는 헤더 컨텐츠박스에서
누른것만 자동으로 컬러가 변경, 고정 유지되게 하고싶습니다.
방법을 알아보니 제이쿼리 쿠키를 이용해서 하는 방법이 있는 것 같습니다만...
너무 생소해서 모르겠어요 ㅠㅠㅠ
현재 스크립트는
$(".hGnb > ul > li > a").mouseover(function(e) {
e.preventDefault();
$(".hGnb_2dep").stop().fadeOut(100);
$(this).next("ul").stop().fadeIn(100);
});
$(".hGnb_2dep").mouseleave(function(e) {
e.preventDefault();
$(".hGnb_2dep").stop().fadeOut(100);
});
$(".mMenu-left .uk-nav > li > a").click(function(e) {
e.preventDefault();
$(".mMenu-left .uk-nav-sub").stop().slideUp(100);
$(this).next("ul").stop().toggle(100);
$(this).parent("li").addClass("on");
});
$(document).on("hover", ".hGnb > ul > li > a", function(event){
$(this).attr("class","pick");
});
html은
<div class="hGnb">
<ul class="clearboth">
<li><a href="#"></a>
</li>
<li><a href="#">Adep</a>
<ul class="hGnb_2dep clearboth">
<li><a href="#">Bdep</a></li>
</ul>
</li>
<li><a href="#">Adep</a>
<ul class="hGnb_2dep clearboth">
<li><a href="#">Bdep</a></li>
</ul>
</li>
<li><a href="#">Adep</a>
<ul class="hGnb_2dep clearboth">
<li><a href="#">Bdep</a></li>
</ul>
</li>
<li><a href="#">Adep</a>
<ul class="hGnb_2dep clearboth">
<li><a href="#">Bdep</a></li>
</ul>
</li>
</ul>
</div>
CSS
.hGnb {width: 100%;}
.hGnb > ul > li {width: 16.666%; float: left;}
.hGnb > ul > li > a {
line-height: 48px;
padding: 0 10px;
font-size: 15px;
font-weight: 500;
color: #ffffff;
text-align: center;
letter-spacing: -0.5px;
transition: all .2s ease-out;
display: block;
}
.hGnb > ul > li > a.on {
color: #666666;
}
.pick {
color: orange !important;
}
.hGnb_2dep {
padding: 10px 0;
box-sizing: border-box;
background: #fff;
display: none;
position: relative;
z-index: 9999;
border: 1px solid #e5e5e5;
}
.hGnb_2dep > li {width: 100%; height: 100%; float: left;}
.hGnb_2dep > li > a {
display: block;
padding: 8px 10px;
font-size: 14px;
font-weight: 500;
color: #777777;
text-align: center;
line-height: 1.3em;
letter-spacing: -0.5px;
transition: all .2s ease-out;
}
.hMenu a:hover, .hGnb > ul > li > a:hover, .hGnb_2dep > li > a:hover {color: orange;}
이렇게 구성되어있습니다.
혹시 쿠키 말고 다른 방법도 있으면 알려주심 감사하겠습니다...ㅜㅡ
답변 2개
메뉴를 클릭시 해당 메뉴의 인덱스값을 localStorage에 저장하시고
해당 인덱스값이 존재한다면 그 해당에 맞는 인덱스메뉴의 컬러를 유지하시면 되겠네요.
https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
예제및속성확인해보세요.
특정한 앵커(#)나
페이지 이동되었다면 해당부분에 파라미터를 주어
앵커또는 파라미터를 갖고있다면(IF문)
해당메뉴를 active라는 클래스를 만들어 주셔도 될 듯
합니다.
답변을 작성하려면 로그인이 필요합니다.