jQuery DIV click, with anchors
javascriptYou can use jQuery to attach a click event handler to a div element that also contains anchor (a) elements. Here’s an example:
HTML:
<div id="myDiv">
<p>This is a div with anchor links.</p>
<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
</div>
JavaScript (with jQuery):
$(document).ready(function() {
$('#myDiv').on('click', 'a', function(e) {
// Prevent the default behavior of the link
e.preventDefault();
// Get the href attribute of the clicked link
var link = $(this).attr('href');
// Do something with the link, such as scroll to the corresponding element on the page
$('html, body').animate({
scrollTop: $(link).offset().top
}, 1000);
});
});
In this example, we attach a click event handler to the myDiv element using jQuery’s on() method. The second argument to the on() method specifies a selector that matches the anchor elements (a) within the myDiv element. This ensures that only clicks on the anchor links within the div trigger the event handler.
Within the event handler function, we use e.preventDefault() to prevent the default behavior of the link (i.e., navigating to the link’s target page). We then use $(this).attr(‘href’) to get the href attribute of the clicked link, which contains the target element’s ID (e.g., #link1).
Finally, we use the animate() method to scroll the page to the target element’s position using its offset().top value. In this example, we use a smooth animation that takes one second to complete.
Other Article on Tag javascript
- - Adding and removing content in jQuery
- - Are JavaScript strings immutable? Do I need a "string builder" in JavaScript?
- - Can I change the Dojo namespace to something other than dojo
- - Can I prevent user pasting Javascript into Design Mode IFrame
- - dynamically create html element in javascript
- - Find XY of an HTML element with JavaScript
- - How can I upload files asynchronously with jQuery
- - How can you display Typing Speed using Javascript or the jQuery library
- - How do you capture mouse events in firefox
- - How to auto-size an iFrame