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

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -