Highlight current page navigation link

Question

I've hardcoded a subnavigation and would like to highlight the navbar item of the current page by simply adding a class 'active' to those links. But the following HTML-Markup in combination with the javascript adds the active class to every li(.irp-menu-item) and not just to the closest li. It would be necessary that the script only adds the class to the closest li and not to the other ones aswell, but somehow I am not able to solve this issue.

HTML-Markup:

<nav id="irp-subnav" class="css-sticky" role="navigation" aria-label="irp-subnav" lang="de-DE">
   <div class="irp-wrapper">
        <div class="irp-background"></div>
        <div class="irp-content">
            <span class="irp-title">
                  TITLE</span>
            <div class="irp-menu">
            <div class="irp-menu-tray">
                <ul class="irp-menu-items">
                  <li class="irp-menu-item"><a href="/LINK-1/" class="irp-menu-link">LINK 1</a>
                                                    </li>
                  <li class="irp-menu-item"><a href="/LINK2/" class="irp-menu-link">LINK 2</a>
                                                    </li>
                  <li class="irp-menu-item"><a href="/LINK3/" class="irp-menu-link">LINK3</a>
                </ul>
            </div>
            <div class="irp-actions irp-actions-right">
                <div class="irp-action irp-action-menucta" aria-hidden="true">

                    <label for="irp-menustate" class="irp-menucta"> <span class="irp-menucta-chevron"></span>
                            </label>
                </div>
            </div>
        </div>
        </div>
    </div>
</nav>

Javascript:

jQuery(document).ready(function($) {
$(function () {
var url = window.location.pathname; 
var activePage = url.substring(url.lastIndexOf('/') + 1); 
    $('.irp-menu-item .irp-menu-link').each(function () { 
        var linkPage = this.href.substring(this.href.lastIndexOf('/') + 1); 

        if (activePage == linkPage) { 
            $(this).closest("li").addClass("active"); 
        }
    });
})
});

for the starter, you don't need both document.ready(function() and $(function(). They are both the same thing. is 'variable' a comment or part of the code ? Also, you are missing an extra pair of }); at the end of the code. — DinoMyte, Jun 01 '16 at 23:50
Hi DinoMyte, ah you're right: 'variable" is a comment I forget to delete it. I'll correct that immediately I just entered the jQuery(document).ready, cause I am running on wordpress and otherwhise I get $ is not a function. — , Jun 01 '16 at 23:53

score 10 · Answer 1 · edited Mar 13 '18 at 15:00

10

Use the Javascript code and style given below and include In your Header:

<style>
    a.current {
        color: orange !important;
    }
</style>
<script>
    $(function () {
        $('.irp-menu li a').each(function () {
            if ($(this).prop('href') == window.location.href) {
                $(this).addClass('current');
            }
        });
    });
</script>

edited Mar 13 '18 at 15:00

RickL

3,318
10
38
39

answered Mar 13 '18 at 14:12

Rupesh Wankhede

457
5
16

score 2 · Answer 2 · answered Jun 02 '16 at 01:52

2

you are using the function "substring" wrong.

string.substring(start,end)

start: Required.

end: Optional.

the correct syntax is:

jQuery(document).ready(function($) {
    var url = window.location.pathname; 
    var activePage = url.substring(0, url.lastIndexOf('/') + 1); 
    $('.irp-menu-item .irp-menu-link').each(function () { 
        var linkPage = this.href.substring(0, this.href.lastIndexOf('/') + 1); 

        if (activePage == linkPage) { 
            $(this).closest("li").addClass("active"); 
        }
    });
});

in following Demo i just used a static url for testing only: https://jsfiddle.net/5ca45spe/2/

answered Jun 02 '16 at 01:52

Rami.Q

2,486
2
19
30

Hello Rami, I've tested your suggestion and then active class were nowhere added, simply seems not to work in my environment :( – Jun 02 '16 at 11:29
this is very useful for all different goals or any megamenu thanks – saber tabatabaee yazdi Sep 10 '16 at 15:48

score 1 · Accepted Answer · answered Sep 07 '16 at 19:10

I've editited Rami's answer to use the whole href.

//this makes the current link containing li of class "active"
$(document).ready(function ($) {
    var url = window.location.href;
    var activePage = url;
    $('.irp-menu-item a').each(function () {
        var linkPage = this.href;

        if (activePage == linkPage) {
            $(this).closest("li").addClass("active");
        }
    });
});

Highlight current page navigation link

3 Answers3