Cara Membuat Menu Aktif dengan Jquery

Saat membuka suatu halaman di sebuah website, biasanya pada bagian navigasi/menu ada sebuah penanda di posisi/halaman manakah sekarang kita berada. Misalnya kita sedang membuka halaman About Us, maka link “About Us” di menu ditandai dengan warna berbeda seperti pada gambar di atas.

Anda bisa membuat sendiri script tersebut dengan mudah yaitu menggunakan jQuery. Apabila struktur html menu anda seperti ini:

Simpan dengan nama index.php

<html>
<head>
<titile>Cara Membuat Menu Aktif dengan jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css" >
<script type="text/css">
$(document).ready(function(){
$('ul li a').click(function(){
$('li a').removeClass("active");
$(this).addClass("active");
});
});
</script>
</head>
<body>
<div style="text-align:center;margin-top:25px;font-weight:bold;texxxt-decoration:none;">
Visit <a href="https://nyimakphp.blogspot.com/" target="_blank">My Blog</a>
</div>
<div class="container">
<nav class="navecation">
<ul id="navi">
<li><a class="menu active"#">About </a></li>
<li><a class="menu" href="#">Contact </a></li>
<li><a class="menu" href="#">Services</a></li>
<li><a class="menu" href="#">Contact Us</a></li>
<li><a class="menu" href="http://www.nyimakphp.blogspot.com/">Read Our Blog</a></li>
</ul>
</nav>
</div>
</body>
</html>

Simpan dengan nama style.css

body{
font-sze:14px;
}
.container{
max-width:960px;
margin:0 auto;
}
nav ul li{
list-style:none;
float:left;
padding-right:20px;
}
nav ul li a{
text-decoration:none;
color:#222;
background-color:#ccc;
padding:4px 5px;
}
.active{
background-color:#d90000;
color:#fff;
}