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

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(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>

    <div class="MyURLs">

        <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

image002.jpg

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

Up Next
    Ebook Download
    View all
    Learn
    View all