그누보드 QA - 헤더 메뉴 클릭시 새로고침 후에도 컬러 유지

헤더 메뉴 클릭시 새로고침 후에도 컬러 유지

Mihamiya 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2021.07.20 13:39:35 1301 (119.♡.♡.239)

답변 2

본문

헤더메뉴에서 클릭된 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;}

이렇게 구성되어있습니다.

혹시 쿠키 말고 다른 방법도 있으면 알려주심 감사하겠습니다...ㅜㅡ