There have been several SO solutions to this, but I haven't had any luck getting them to work. JQuery beginner trying to work through a solution to add an 'active' class to the active list item in a simple navigation menu:
<div id="main-menu">
<ul>
<li><a href="/site/about">About Us</a></li>
<li><a href="/site/work">Our Work</a></li>
<li><a href="/site/contact">Contact Us</a></li>
</ul>
</div>
A previous SO post indicated that this worked, but I've had no success so far. I'm using pretty permalinks in wordpress, so the full path to any page is like:
/
This is my work so far:
<script>
$(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,''));
$('#main-menu li').each(function(){
if(urlRegExp.test(this.href)){
$(this).addClass('active');
}
});
});
</script>
I've tried several solutions, including changing how I write the href, etc. The part of the code I'm really foggy on is the urlRegExp part...Any help?
There have been several SO solutions to this, but I haven't had any luck getting them to work. JQuery beginner trying to work through a solution to add an 'active' class to the active list item in a simple navigation menu:
<div id="main-menu">
<ul>
<li><a href="/site/about">About Us</a></li>
<li><a href="/site/work">Our Work</a></li>
<li><a href="/site/contact">Contact Us</a></li>
</ul>
</div>
A previous SO post indicated that this worked, but I've had no success so far. I'm using pretty permalinks in wordpress, so the full path to any page is like:
http://www.foobar./site/about/
This is my work so far:
<script>
$(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,''));
$('#main-menu li').each(function(){
if(urlRegExp.test(this.href)){
$(this).addClass('active');
}
});
});
</script>
I've tried several solutions, including changing how I write the href, etc. The part of the code I'm really foggy on is the urlRegExp part...Any help?
Share Improve this question asked Sep 19, 2012 at 14:53 NallyRollNallyRoll 3601 gold badge8 silver badges20 bronze badges 2-
you are trying to find a
hrefin a<li>. – Ricardo Binns Commented Sep 19, 2012 at 14:55 -
Why not use what Wordpress has to offer in the classes it sets on the
<body>like a previous answer I've made on SO, stackoverflow./a/12272075/600101? No JS, only WP and CSS in symbios. Saves the world some trees. :) – Henrik Ammer Commented Sep 19, 2012 at 15:25
2 Answers
Reset to default 5try with
$('#main-menu li a').each(function(){
if(urlRegExp.test(this.href)){
...
});
instead of
$('#main-menu li').each(function(){
if(urlRegExp.test(this.href)){
...
});
since href attribute you're looking on next line with this.href is applied on links, and not on list-items
then, if you need to apply the class active on <li> element just use
$(this).parent().addClass('active');
// or $(this).closest('li').addClass('active');
// or pure-JS : this.parentNode.className += 'active';
this.href is wrong (should be $(this), plus you're checking on the list element, rather than li. Try this:
$('#main-menu li > a').each(function(){
if(urlRegExp.test($(this).attr('href'))){
$(this).addClass('active');
}
});