[JS] 부트스트랩 3.* Navbar 현재 페이지 active 상태로 두기

기존 scrollspy가 적용된 template를 수정해서 써야하는 일이 생겼다.

하지만 이것은 기본적으로 scrollspy가 적용되어 scroll에 따라 먹히는 부분...

그래서 페이지 이동에 따라 작동되도록 nav를 수정해야했다.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
       </ul>
</div>

nav는 위와 같은 상태로 둔다.

https://getbootstrap.com/docs/3.4/components/#navbar

Components · Bootstrap

 

$(document).ready(function() {
  $('li.active').removeClass('active').removeAttr('aria-current');
  $('a[href="' + location.pathname + '"]').closest('li').addClass('active').attr('aria-current', 'page'); 
});

위 코드를 넣으면 제대로 작동된다.

이거 넣으니 번거롭게 내가 따로 건드릴 일도 없어서 행-복 \ㅇㅅㅇ/

https://stackoverflow.com/questions/24514717/bootstrap-navbar-active-state-not-working

Bootstrap navbar Active State not working