jQuery Plugin To Highlight Current Page In Navigation - matchactive.js

matchactive.js is a jQuery plugin which automatically adds the CSS class 'active' to your navigation links when the anchor links match the current page URL. Useful to highlight current page in navigation to make it easier to see which webpage you're viewing on.

How to use it:

1. Assumed that you have 3 webpages (index.html, about.html and contact html) in your website. Let's create a navigation that contains anchor links pointing to the corresponding webpages.

<ul class="nav">
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

2. Include both jQuery library and the jQuery matchactive.js plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="matchactive.plugin.js"></script>

3. Call the function on the navigation and the plugin will take care of the rest.

$('ul.nav > li > a').matchactive();

4. Change the CSS styles of your navigation links when highlighted.

.active { ... }

---

This awesome jQuery plugin is developed by guitarbeerchocolate. For more Advanced Usages, please check the demo page or visit the official website.