Question

I’m no javascript master, but I need to create a script that accomploshies the following.

If body id=”index” add class”current-selected” to anchor tag where href=index.php
If body id=”services” add class=”current-selected” to to anchor tag where href=services.php
etc.

Does this make any sense? Can anyone help?

Thanks if you can!

Abbotsford Web Design

Answer 1

Building on Using Jquery to add/remove a class based on body Id:

var bodyID = $('body').attr('id');

$("a[href$='" + bodyID + ".php']").toggleClass('current-selected'); //add/remove

OR

$("a[href$='" + bodyID + ".php']").addClass('current-selected'); //add

Instead of “=”, we use “$=” (referring to “href$=”) syntax which will matched the end of the string, so both “index.php” and “/index.php” will be matched by “index.php”.

To implement it on your site, you need to run the above code inside the jQuery ready function so all the HTML below the script block loads before the Javascript performs actions on it:

EDIT: This works for all main/top navigation links for your site (string for matching the href is the last path segment of the URL):

<script type="text/javascript">
$(document).ready(function(){
    page = window.location.pathname.substring(1).replace(/\//g,'');
    $("a[href*='" + page + "']").addClass('current-selected');
});
</script>