DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > How to highlight current page’s top/main navigation link

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

Svetoslav Marinov user avatar by
Svetoslav Marinov
·
Jul. 21, 11 · Web Dev Zone · Interview
Like (0)
Save
Tweet
3.69K Views

Join the DZone community and get the full member experience.

Join For Free

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
  • 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

Links Snippet (programming) dev GitHub JavaScript Programmer (hardware) ANIMAL (image processing) Repository (version control) Download

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Vaadin Apps as Native Executables Using Quarkus Native
  • Monitoring Spring Boot Application With Prometheus and Grafana
  • Making Your Own Express Middleware
  • Monolith vs Microservices Architecture: To Split or Not to Split?

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo