Home > DeveloperSection > Blogs > JQuery click copy link to the div

JQuery click copy link to the div


JQuery JQuery 
Ratings:
0 Comment(s)
 2497  View(s)
Rate this:

JQuery click copy link to the div

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 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:

Explain Jquery:

1.  $(document).ready(function () {

2.  $('a[href$="#"]').click(function (e) {

3.  e.preventDefault();

4.  jQuery('a').removeClass('active');

5.  jQuery(this).addClass('active');

6.  $('div.location').html('<p>Your Location is: ' + jQuery(this).text() +'</p>');

7.  });

8.  });

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.


Don't want to miss updates? Please click the below button!

Follow MindStick