javascript - How to add active class to navigation items after the page url has changed -
javascript - How to add active class to navigation items after the page url has changed -
how can accomplish having navigation menu automatically observe append class of active next construction have is...
<ul class="navigation-list"> <li><a href="<?php echo $url; ?>">home</a></li> <li><a href="<?php echo $url; ?>">how works</a></li> <li><a href="<?php echo $url; ?>">hire your...</a></li> <li><a href="<?php echo $url; ?>">pricing</a></li> <li><a href="<?php echo $url; ?>">themes</a></li> <li><a href="<?php echo $url; ?>">features</a></li> <li><a href="<?php echo $url; ?>">why us</a></li> <li><a href="<?php echo $url.'/blog/'; ?>">blog</a></li> </ul>
as can see site still under construction want when first visit site home link class of active like...
<li><a href="<?php echo $url; ?>" class="active">home</a></li>
and when click... let's how works taken on how works page , nav remove active home , append how works like...
<li><a href="<?php echo $url; ?>" class="active">how works</a></li>
the $url parameter/tag outputs url http://www.example.com have tried not work...
$(".navigation-list li a").each(function() { if (this.href.search(location.href) != -1) { $(this).addclass("active"); } });
i have tried next , worked...
$(function(){ var url = window.location.pathname, urlregexp = new regexp(url.replace(/\/$/,'') + "$"); $('.navigation-list li a').each(function(){ if(urlregexp.test(this.href.replace(/\/$/,''))){ $(this).addclass('active'); } }); });
although when utilize it, when i'm @ //mysite.org links in navigation become active , when go //mysite.org/blog/ activates blog nav item
javascript jquery html css
Comments
Post a Comment