Handling URLs (Hyperlinks) using jQuery

Introduction

Assume I have a blog/website and I want all external URLs to open on new browser tab. For example when you click on any external URL on Facebook, it opens URL on new tag. No meaning you have mentioned "target" attribute with URL or not, I always want external URLs to open on new tab.

In addition with 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 on 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 jQuery, just adding 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 any target attribute and my jQuery code will add this to DOM.

Adding Icons to external URLs

Source Article: Here

Comments

Popular posts from this blog

Migrating database from ASP.NET Identity to ASP.NET Core Identity

Customize User's Profile in ASP.NET Identity System