a태그의 href 속성 필터, 클래스 추가

#jquery #location_addClass

 

 

안녕하세요 Gi-1 입니다.

 

홈페이지를 만들다 보면, 서브페이지에 접속 하였을 때 네비바 안의 해당 태그에 클래스명을 추가하는 경우가 많은데요!

 

페이지별 a태그의 href 속성이 페이지 주소에 포함된다면, 클래스를 추가하는 제이쿼리입니다.

입사하고 1년동안 정말 많이 썼던 코드인거 같네요!

 

별도로 하단에는, 홈페이지 주소에 따라서 수동으로 클래스명을 추가하는 방법도 올려봅니다.

 

 

 

예제

 

서브페이지의 "공지사항"에 접속한 상황입니다.

이미 공지사항에 접속해 있다는 것을 사용자에게 알려주기 위해서 공지사항이라 큰 타이틀이 써져있고, 리스트에서 공지사항에만 초록색 밑줄이 그어져 있는걸 확인할 수 있습니다.

"복지뉴스"에 접속하면 공지사항에 있는 밑줄은 사라지고, 복지뉴스에 밑줄이 그어질 것 입니다.

 

 

 

 

 

html

  <header id="header">

    <ul class="gnb">

      <li class="depth2">

        <a href="홈페이지 주소"></a>

      </li>

      <li class="depth2">

        <a href="홈페이지 주소"></a>

      </li>

      <li class="depth2">

        <a href="홈페이지 주소"></a>

      </li>

    </ul>

  </header>

 

script

<script>
  $(document).ready(function () {
 
    var url = window.location.href;
    $('#header .gnb .depth2 > a').each(function () {
      if (url.indexOf($(this).attr('href')) > -1) {
        $(this).parent(".depth2").addClass('active');
      }
    });
  });
</script>

 

 

 

---

 

 

다른 방법으로는, 주소창의 주소에 따라서 클래스를 수동으로 기입해주는 방법이 있습니다.

 

script

  <script>

    $(document).ready(function () {

      var url = window.location.href;

 

      $('#header .gnb .depth2 > a').filter(function () {

        if (url.includes('sub01.php')) {

          $(this).parent(".depth2").addClass('active');

        } else if (url.includes('sub02.php')) {

          $(this).parent(".depth2").addClass('active');

        }

      })

    });

  </script>

 

 

 or

 

  <script>

  $(document).ready(function () {

    if(window.location.href.indexOf("/company/contact/message/create") > -1)

    {

         $(".com_contact_top_txt2").addClass("on");

    }

  });

 </script>