How to highlight current page’s top/main navigation link
Join the DZone community and get the full member experience.
Join For FreeThis is an easy way to select the current page. Users will know what page there are on.
This snippet is part of my new snippets repository on GitHub:
download it from https://github.com/lordspace/snippets/zipball/master
This example is in: jsProfessional JavaScript Developers Wrox Programmer
Powered by bixt.net/set_active_page/
I am assuming that jQueryjQuery Cookbook Animal Guide Lindley
Powered by bixt.net is loaded before that
/* add a class to the main nav so we know which page we're on. loops through links in a container with class 'app_main_nav' and sets 'app_main_nav_active' class to the current link it just compares pages on the top level directory e.g. products.html and NOT /app/prodcts.html */ function app_set_active_page() { var cur_file = window.location.pathname; cur_file = cur_file.replace(/\?.*/, ''); // rm. params cur_file = cur_file.replace(/^.*\//, ''); // rm. leading stuff. leave just the filename cur_file = cur_file || 'index.php'; $(".app_main_nav a").each(function() { var cur_lnk_href = $(this).attr('href'); cur_lnk_href = cur_lnk_href.replace(/\?.*/, ''); // rm. params cur_lnk_href = cur_lnk_href.replace(/^.*\//, ''); // rm. leading stuff. leave just the filename if (cur_lnk_href == cur_file) { $(this).addClass("app_main_nav_active"); } }); }
Related
- http://www.webringideas.com/web-development/simplest-jquery-script-to-highlight-current-pages-navigation-link.html
- http://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu
From http://www.devcha.com/2011/07/how-to-highlight-current-pages-topmain.html
Topics:
Opinions expressed by DZone contributors are their own.
Comments