jQuery - 현재 주소에 따라 카테고리 스타일 바꾸기

현재 카페24를 이용하여 쇼핑몰을 구축중인데

기존에 제공되는 카테고리 모듈의 경우 클릭을 해도 페이지만 이동할 뿐 아무런 css, js적인 변화가 없다.

 

그래서 현재 페이지가 어디인지 명확하게 소비자에게 인지되지 않을 것 같아 디자인을 추가하기로 함!

 

클릭시 addClass를 해주게 되었을 때 클릭 후 리다이렉트 되므로 Class가 다시 사라져서 ㅠㅠㅠ

현재 페이지의 URL에 따라 addClass가 되도록 코드를 수정했다.

 

 

HTML

<div module="layout_category" class="categoryList2 cate-wrapper">
  <div id="home"><a href="/" class="cate">홈</a></div>
  <div id="cate_{$cate_no}"><a href="/product/list_thumb.html{$param}" class="cate">{$name|cut 25}</a></div>
  <div id="cate_{$cate_no}"><a href="/product/list_thumb.html{$param}" class="cate">{$name|cut 25}</a></div>
</div>

 

jQuery

var url = $(location).attr('href');
var home = 'https://홈페이지 주소/';
var no = url.substring(url.lastIndexOf('=') + 1);

$(document).ready(function(){
  if(url == home){
    $('#home').addClass('select_cate');
  }  else {
  $('#cate_' + no).addClass('select_cate');
  }
});

 

 

생각은 진작에 했는데 코드로 구현할 때

선언한 변수를 활용해서 id값을 작성하려고 하는데서 꽤나 시간을 많이 잡아먹었다..ㅎ

기억하자... $('#' + 변수명)

 

 

구글링의 흔적들...ㅋㅋㅋㅋㅋㅋㅋ

 

 

어쨌든 구현 성공 :)