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

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

Assuming your body ID will not always match up perfectly with the file-name of its corresponding link, you can do it this way.

$("body#index a[href='index.php']").addClass("current-selected");
$("body#service a[href='service.php']").addClass("current-selected");

If your body ID will always match your corresponding link href value, you can extract the body ID first, and use it as a variable within the jQuery selector:

var body_id = $("body").attr("id");
$("a[href='"+body_id+".php']").addClass("current-selected");

Answer 2

Something like this should do the trick. This will dynamically determine your body element ID and change all anchor tags that reference the php file of the same name.

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

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

As noted in another comment, use the .removeClass("current-selected") function to accomplish the reverse.

Also, if your URL's only end with "index.php", i.e. the href attribute is something like "/something/index.php", use "a[href$='" + bodyID + ".php']" as your selector. That will match href values that end with the file name.

Answer 3

 $('body#index a[href="index.php"]').addClass("current-selected");
 $('body#services a[href="services.php"]').addClass("current-selected");

Answer 4

Building on http://stackoverflow.com/questions/1924723/using-jquery-to-add-remove-a-class-based-on-body-id/1924754#1924754:

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>