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

  Modified On Sep-18-2014 01:24:07 PM

Leave Comment