---
title: "JQuery click copy link to the div"  
description: "In this blog I am trying to explain, how to copy links to the div using jquery click.Below given the sample for copy link to the div using jquery clic"  
author: "Vijay Shukla"  
published: 2013-01-08  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/426/jquery-click-copy-link-to-the-div  
category: "jquery"  
tags: ["jquery"]  
reading_time: 3 minutes  

---

# JQuery click copy link to the div

In this [blog](https://www.mindstick.com/articles/12705/myths-and-misconception-about-blog) I [am trying](https://answers.mindstick.com/qa/36834/which-two-programming-languages-should-i-master-in-if-i-am-trying-to-get-into-google-or-facebook) to [explain](https://www.mindstick.com/forum/157854/what-is-system-debugging-explain-some-system-debugging-tools-used-in-modern-computer-systems), how to [copy](https://www.mindstick.com/forum/161993/explain-the-numpy-array-copy-vs-view-with-example) [links](https://www.mindstick.com/blog/415/css3-links) to the [div using jquery](https://www.mindstick.com/forum/34323/get-value-of-child-div-using-jquery) [click](https://www.mindstick.com/articles/12423/social-login-magento-2-one-click-to-register-social).

Below given the [sample](https://www.mindstick.com/news/2174/mars-mission-by-nasa-prepares-for-tests) for copy [link](https://www.mindstick.com/articles/23633/link-builder) to the div using jquery click:-

```
<html><head>    <style type="text/css">        .active        {            background: #E5E5E5;        }        a        {            text-decoration: none;            color: #CD853F;
        }        a hover        {            text-decoration: underline;        }        .location        {            color: #CD853F;        }    </style>    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">        $(document).ready(function () {            $('a[href$="#"]').click(function (e) {                e.preventDefault();                jQuery('a').removeClass('active');                jQuery(this).addClass('active');                $('div.location').html('<p>Your Location is: ' + jQuery(this).text() +'</p>');
            });
        });    </script></head><body>    <table>        <tr>            <td>                <a href="#">Mindstick India</a>            </td>        </tr>        <tr>            <td>                <a href="#">Mindstick U.S.A</a>            </td>        </tr>        <tr>            <td>                <div class="location">            </td>        </tr>    </table>    </div></body></html>
```

##### Output:

\

![JQuery click copy link to the div](https://www.mindstick.com/blogs/2ab12ed2-87c9-4752-b1d1-f747900a1bc0/images/37f4920d-9e95-4d53-96cd-c92b524cd38a.png)

##### Explain Jquery:

```
 $(document).ready(function () { $('a[href$="#"]').click(function (e) { e.preventDefault(); jQuery('a').removeClass('active'); jQuery(this).addClass('active'); $('div.location').html('<p>Your Location is: ' + jQuery(this).text() +'</p>');
 });
 });
```

1. It will load as soon as the DOM is loaded and before the page contents are loaded.

2. This is click event it will fire when we click on the <a></a> tag.

3. This method is called; the default action of the event will not be triggered.

4. This line of code removes the class of the <a></a> tag, and now the .active class will not work.

5. This line of code adds the class of the <a></a> tag, and now the .active class will work again.

6. This line set the text in .location class which is use in <div></div> tag.

---

Original Source: https://www.mindstick.com/blog/426/jquery-click-copy-link-to-the-div

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
