Tự động thêm class 'active' để đánh dấu mục điều hướng hoạt động trong trang web

Chia sẻ:

29.10.21 | 0 nhận xét | lượt xem

Chào mọi người, hôm nay mình sẽ chia sẻ với các bạn một thủ thuật đơn giản nhưng hiệu quả để thêm lớp 'active' vào thẻ <li> và liên kết trên trang web. Điều này sẽ giúp làm nổi bật mục điều hướng hiện tại và tạo phản hồi hữu ích cho người dùng.
Và demo các bạn có thể xem tại widget "Nhãn" tại blog này, như hình ảnh dưới mình đang ở trang các bài viết thuộc nhãn "iOS"

Hãy cùng tìm hiểu cách "hack" này, và ứng dụng thực tế trong bài viết này là áp dụng cho 1 menu

HTML cho menu

Đầu tiên, chúng ta cần chuẩn bị một đoạn mã HTML cho menu của chúng ta như sau:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

JavaScript

Bây giờ, chúng ta sẽ thêm đoạn mã JavaScript để "hack" menu của chúng ta. Hãy thêm đoạn mã sau vào phần cuối của thẻ </body>:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var currentUrl = window.location.href;

    // Lấy tất cả liên kết trong trang
    var links = document.querySelectorAll('a');

    // Check từng liên kết xem có khớp với trang hiện tại không
    links.forEach(function(link) {
      if (link.href === currentUrl) {
        var li = link.parentNode; // Lấy thẻ cha của liên kết (thẻ <li>)
        li.classList.add('active'); // Thêm lớp 'active' vào thẻ <li>
      }
    });
  });
</script>

Style cho class 'active'

Cuối cùng, chúng ta cần tạo một phong cách cho class 'active' trong CSS.

.active {
    font-weight: bold;
    color: red;
  }

Đó là thủ thuật để thêm class 'active' vào thẻ <li> và liên kết của menu. Bây giờ, khi bạn truy cập vào một trang, ví dụ trang About class 'active' sẽ tự động được thêm vào thẻ

tương ứng như bên dưới

<ul>
  <li><a href="#">Home</a></li>
  <li class="active"><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Thử áp dụng thủ thuật này vào trang web của bạn và cảm nhận sự khác biệt "cool" mà nó mang lại. Người dùng sẽ không khỏi bất ngờ với sự "chất" của trang hiện tại! Keep it "chill"!