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>

</li>

</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>

<style>

.tpactive{

color:red;

}

</style>

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é!

3.4/5 - (5 bình chọn)

Bài viết mới:

CSS, Thủ thuật

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

Bài viết cùng chủ đề:

Kỹ thuật dồn các icon vào 1 file để hiển thị khi làm web

CodePen Home Textarea Tabs + Syntax Highlighting

Tạo đồng hồ đếm ngược trong wordpress bằng PHP – JavaScript Countdown Clock

Cách bỏ trường website trong bình luận của WordPress

Count Up Number trên themes Flatsome như thế nào?

Kiểm tra và tự Khởi Động Lại MySQL Khi Quá Tải Trên Máy Chủ Linux, VPS, aaPanel

Tạo bảng với nút tìm kiếm dữ liệu / How to – Filter/Search Table

Css hiệu ứng chữ nhấp nháy – blinking/flashing text with CSS 3

Aiken Trung