Cách Highlight Menu Item Trang Hiện Tại Với Vanilla JavaScript

Học cách highlight mục menu trang hiện tại trong thanh điều hướng/website.

Tính năng phổ biến của website là highlight mục menu trang hiện tại khi người dùng điều hướng giữa các trang.

Cách làm với vanilla JavaScript:

Bước 1: Menu đơn giản

<nav class="navbar"> <a href="/">Home</a> <a href="/about">About</a> <a href="/contact">Contact</a> </nav>

Bước 2: CSS styling

CSS tối thiểu. Phần quan trọng là class .current, sẽ thêm vào mục menu trang hiện tại ở bước 3:

.navbar { background-color: #111; padding: 1rem; } .navbar a { text-decoration: none; color: white; padding: 1rem; } .current { color: #df3e23; }

Bước 3: JavaScript

Mã này tìm URL trang hiện tại và thêm class current vào mục menu tương ứng:

const current = 0; for (var i = 0; i < document.links.length; i++) { if (document.links[i].href === document.URL) { current = i; } } document.links[current].className = 'current';