Focal55 wants to be your web guy

jQuery Tutorial: Add Class to All Outbound Links on Your Site

June
22

By Joe Ybarra, Lead Developer

Tags: jquery

This tutorial will show you how to add one line of jQuery to programmatically add a Class to any anchor link that points to another website. This tutorial assumes that you already have included the jQuery library on your page.

Here is the jQuery statement

//Add Class to Outbound Links
$(document).ready(function(){
  $("a[href*='http://']:not([href*='"+window.location.hostname+"'])")
        .addClass("ExternalLink");
});

Now, all outbound links will have the ExternalLink class name applied. You can add some styles to the ExternalLink class like this:

<style>
.ExternalLink
{
  background:url(images/leaving_site.gif) right no-repeat;
  padding:0 23px 0 0;
}
</style>

Isn't jQuery amazing! Contact Focal55 for your jQuery development needs.

Add a Comment