I'm trying to append a class to an LI automatically if the filename matches the href (e.g; if the anchor has the href attribute set to about.php and the filename of the current page is about.php then it would append the class.) however, along the way I've hit some complications and I've been getting myself confused with the syntax a little...
So far I have this...
var filename = location.pathname.substring(1)
$(document).ready(function(){
$('a').each(function() {
if (this.href === filename) {
$(this).parent('li').addClass('current_page_item');
}
});
});
My navigation is constructed as shown here and as you can see, it works and everything but only when the class is set manually... so I'm trying to get it to be automatic from the actual filename.
I hope this make some sense to someone, as I'm really confused on how to get this working now!
Thank-you to anyone who contributes, it's of great help and will help me understand the jquery syntax further, actually selecting something specific and writing a logical statement in jquery really confuses me as it's very different to PHP, which is what I'm used to.
My markup looks like this, since I didn't include it before and just assumed people would look at the source code to understand what I was meaning (though, I should have put it here)
<nav>
<div class="container">
<ul class="group" id="effects">
<li><a href="index.php" title="View the latest news">News</a></li>
<li><a href="about.php" title="Find out more about us">About</a></li>
<li><a href="#" title="Find out about races">Races</a></li>
<li><a href="#" title="Find out what tools we use">Tools</a></li>
<li><a href="#" title="Read the Frequently Asked Questions">FAQ</a></li>
<li><a href="contactus.php" title="Contact us">Contact Us</a></li>
</ul>
</div>
</nav>
Thanks.