Thêm class active cho thẻ a đang trùng với link hiện tại của website

Giải thích dài dòng ra là làm nổi bật lên các thẻ a có URL trùng với link hiện tại của trang web, thường ứng dụng để nhấn mạnh các link đang active như trong menu hoặc sidebar của website.

Trong bài viết này mình trình bày cách thêm class “tpactive” cho menu bên sidebar nhé

Ta có đoạn code html của sidebar như sau, nếu URL hiện tại trùng với thẻ a nào thì đổi màu cho nó

<ul class="menu">
	<li class="menu-item">
		<a href="#url1">Menu 1</a>
	</li>
	<li class="menu-item">
		<a href="#url2">Menu 2</a>
	</li>
</ul>

Để thêm class active vào ta dùng đoạn javascript sau cộng thêm css lại class tpactive

<style>
  .tpactive{
    color:red;
  }

</style>

<script>

jQuery(function($) {
   var path = window.location.href;
 
   $('ul a').each(function() {
      if (this.href === path) {
         $(this).addClass('tpactive');
      }
   });
});

</script>

Chúc các bạn thành công nhé!