วิธีเน้นรายการเมนูหน้าปัจจุบันด้วย JavaScript วานิลลา

เรียนรู้วิธีเน้นหน้าที่ใช้งานอยู่ในปัจจุบันในแถบนำทาง/เมนูของเว็บไซต์

คุณลักษณะทั่วไปของเว็บไซต์คือการเน้นรายการเมนูหน้าปัจจุบันเมื่อผู้ใช้นำทางจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง

ต่อไปนี้คือวิธีการดำเนินการด้วย JavaScript วานิลลา

ขั้นตอนที่ 1:เมนูอย่างง่าย

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

ขั้นตอนที่ 2:การจัดรูปแบบ CSS

การจัดรูปแบบ CSS ขั้นต่ำบางส่วน ส่วนสำคัญที่นี่คือ .current class ซึ่งเป็นสิ่งที่เราจะเพิ่มให้กับรายการเพจที่ใช้งานอยู่ในปัจจุบัน ในขั้นตอนที่ 3:

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

.current {
	color: #df3e23;
}

ขั้นตอนที่ 3:JavaScript

รหัสนี้จะมองหา URL ของหน้าปัจจุบันแล้วเพิ่ม current คลาสไปยังรายการเมนูที่เกี่ยวข้อง:

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';