적용을 위해서는 스킨 편집에서 메뉴에 적용된 클래스를 알아야 합니다.
블로그 태그 확인
<nav class="blog-menu">
[##_blog_menu_##]
</nav>
적용을 위해서는 일단 스킨에서 블로그 메뉴 [##_blog_menu_##] 치환자가 적용된 적용된 태그의 클래스를 알아야 합니다.
<nav class="blog-menu">
<ul>
<li class="t_menu_home first"><a href="/" target="">Home</a></li>
<li class="t_menu_guestbook last"><a href="/guestbook" target="">Guest Book</a></li>
</ul>
</nav>
치환자를 사용하면 별도로 태그를 삽입할 필요 없이 꾸미기에서 설정한 메뉴를 리스트 태그로 만들어 적용을 하게 됩니다.
jQuery 적용
$(window).load(function(){
$('.blog-menu').find('li').each(function(){
if ( window.location.pathname == $(this).find('a').attr('href')){
$(this).addClass('current');
}
});
});
코드 중 $('.blog-menu').find('li').each(function() 두 번째 줄에 있는 클래스만 자신에게 맞는 클래스로 변경하여 주면 현재 페이지가 리스트에 있는 주소인지 확인을 하고 맞다면 해당 요소에 current라는 클래스를 자동으로 추가하게 됩니다.
클래스가 아니고 <nav ID="blog-menu">로 적용이 되었다면 $('#blog-menu') 로 변경하여 적용합니다.
속성 추가
.blog-menu ul li.current {
background: #04beb8;
}
추가된 요소에 속성을 추가하게 되면 현재 주소와 메뉴 주소가 동일할 경우 추가적으로 속성을 적용됩니다.
적용 결과
추가한 배경 속성이 해당 메뉴에만 적용이 되어 현재 위치를 알 수 있으며, 배 경외에 모든 속성을 적용하여 표시할 수 있습니다.
'Internet > jQuery' 카테고리의 다른 글
제이쿼리 비어있거나 0 또는 특정 단어를 포함하는 요소 제거 및 변경 (0) | 2023.04.06 |
---|---|
티스토리 data-ke-size="size16" 속성 제거하기 (11) | 2023.02.17 |
제이쿼리 스크롤 상단 메뉴 고정 (2) | 2014.10.18 |
스크롤 내리면 나타나는 제이쿼리 탑버튼 (0) | 2014.10.14 |
간단한 제이쿼리 토글 버튼 (0) | 2014.09.22 |