Cách làm nổi bật mục menu của trang hiện tại bằng JavaScript vani

Tìm hiểu cách đánh dấu trang hiện đang hoạt động trong menu / thanh điều hướng của trang web của bạn.

Một tính năng phổ biến của trang web là đánh dấu mục menu trang hiện tại khi người dùng điều hướng từ trang này sang trang khác.

Dưới đây là cách thực hiện điều đó với JavaScript vani.

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:Tạo kiểu CSS

Một số kiểu CSS tối thiểu. Phần quan trọng ở đây là .current lớp, là những gì chúng tôi sẽ thêm vào mục trang đang hoạt động 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 sẽ tìm kiếm URL của trang hiện tại và sau đó thêm current hạng 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';