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");         }     }); }); 

Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo