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.
Leave Comment