Advanced Search

Simple jQuery active menu highlighter

/ Published in: jQuery
Save to your folder(s)
This is a very simple way of highlighting the current page of a menu. It uses javascipt to take the current url and cross checks it against any URLs that match in the menu. If one matches then add an ‘active’ class to it.
Be careful with #’s though. because a traling # in the URL would screw this up. Though you could always build in a function to strip out #’s before getting to the selector…
Please note: if at first this doesn’t work try using document ready or replacing $’s for jQuery..

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type="text/javascript">
  2.     jQuery(document).ready(function($){
  3.         // Get current url
  4.         // Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link
  5.         var url = window.location;
  6.         $('a[href="'+url+'"]').addClass('active');
  7.         $('a[href="'+url+'"]').prepend('// ');
  8.     });
  9. </script>

URL: http://theninthnode.com/2011/05/simple-jquery-active-menu-highlighter/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.