Over a million developers have joined DZone.

How to highlight current page’s top/main navigation link

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

This 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


 

From http://www.devcha.com/2011/07/how-to-highlight-current-pages-topmain.html

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}