jquery - Highlight current page navigation link -
i've hardcoded subnavigation , highlight navbar item of current page adding class 'active' links. following html-markup in combination javascript adds active class every li(.irp-menu-item) , not closest li. necessary script adds class closest li , not other ones aswell, somehow not able solve 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"); } }); }) });
i've editited rami's answer use whole href.
//this makes 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"); } }); });