Handling URLs (Hyperlinks) Using jQuery

Introduction

Assume I have a blog/website and I want all external URLs to open in a new browser tab. For example when you click on any external URL on Facebook, it opens the URL in a new tag. That does not mean that you have or have not provided a "target" attribute with the URL; I always want external URLs to open in a new tab.

In addition to this, I also want to add an external icon with all external URLs. How to do this?

Let's read all one by one.

If you simply want to open all URLs in a new tab, a quick jQuery code can do this. Here you go.

jQuery Code

$(document).ready(function () {

$('div.MyURLs a').attr({ target: '_blank' });

});

</script>

Using above the jQuery, just add a new attribute "target" to "_blank" to all URLs inside <div class="MyURLs">.

ASPX Code

<body>

<a href="http://www.itorian.com">ITORIAN</a>

<br />

<a href="http://www.google.co.in">Google</a>

<br />

<a href="http://www.yahoo.in">Yahoo</a>

<br />

<a href="http://www.microsoft.com">Microsoft</a>

<br />

<a href="http://www.c-sharpcorner.com">C# Corner</a>

</div>

</body>

Very simple code above, I'm using five URLs having no target attribute and my jQuery code will add this to the DOM.

Adding Icons to external URLs

Source Article: http://www.itorian.com/articles/jquery/post/316/jQuery-and-CSS-Selectors-Part-5.aspx

Handling URLs (Hyperlinks) Using jQuery

Reactions

Comments