Tambahkan Kelas ‘active’/’current’ pada Menu Berdasarkan URL pada Address Bar

Tambahkan kelas active pada menu yang sedang aktif (menu dengan nilai href yang sama dengan URL pada Address bar): JQuery

$(function() { var path = window.location.href; // Mengambil data URL pada Address bar $(‘nav a’).each(function() { // Jika URL pada menu ini sama persis dengan path… if (this.href === path) { // Tambahkan kelas “active” pada menu ini $(this).addClass(‘active’); } }); });

CSS

nav { font:normal 14px Impact,Arial,Sans-Serif; text-transform:uppercase; }

nav ul { list-style:none; border:1px solid #1D4ABE; margin:0px 0px; padding:0px 0px; background:#222; -webkit-box-shadow:0px 1px 2px #000; -moz-box-shadow:0px 1px 2px #000; box-shadow:0px 1px 2px #000; overflow:auto; }

nav li { display:inline; float:left; }

nav li a { display:block; text-decoration:none; padding:10px 15px; background:#222; color:#ccc; text-shadow:0px 1px 1px rgba(0,0,0,0.8); }

nav li a:hover {background:#333;text-decoration:none;} nav li a.active {background:#1D4ABE;color:#fff;}

Lihat Demo

Pembaharuan: Versi JavaScript murni JavaScript

function currentNav(navId) { var current = window.location.href.split(‘#’)[0], nav = document.getElementById(navId), navItem = nav.getElementsByTagName(‘a’); for(var i = 0; i < navItem.length; i++) { // Jika nilai atribut href pada salah satu array tautan = URL address bar… if(navItem[i].href == current || navItem[i].href == decodeURIComponent(current)) { // Tambahkan kelas ‘active’ pada tautan tersebut navItem[i].className = “active”; } } } currentNav(‘navigation’); // Terapkan fungsi ‘currentNav()’ pada navigasi dengan id=”navigation”

HTML

Detail CSS

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

Sumber: Stackoverflow – A Better Idea to Add Active Class to Menu Item