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

Use jQuery to programmatically add a class name to any anchor link that points to another website. This tutorial assumes that you already have included the jQuery library on your page.


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

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


.external-link {
background:url(images/leaving_site.gif) right no-repeat;
padding:0 23px 0 0;
}



Comments (0)

About Us

We are web developers versed in front and back end technologies. We like PHP, Drupal and Wordpress for our web apps and Foundation, Bootstrap, SUSY and Sass for our User Interfaces. Contact us to be apart of your next web project.

Latest Articles

Copyright © 2019 Focal55 Inc. / All rights reserved.