Menu
i made a test.html document to test a script. Somehow it is not working and i can't get why nothing is happening. The Script is in -tags and wrapped with -tag and the css also has it´s -tags. Why shouldn't it work? Here is the code
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$('#menu li a').on('click', function() {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
</script>
<style>
.current {
text-decoration: underline;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="about-link" class="current" href="#">ABOUT</a></li>
<li><a id="events-link" href="#">EVENTS</a></li>
<li><a id="reviews-link" href="#">REVIEWS</a></li>
<li><a id="contact-link" href="#">CONTACT</a></li>
</ul>
</div>
</body>
</html>
383
Because your code for binding event handler is executed before the elements is present in DOM, the event is not bound on the element.
To solve this problem, you can either
ready() callback, so that your code will be executed when DOM is finished loading<body>, so all the elements are present in DOM and you can bind the events on itCode:
$(document).ready(function () {
$('#menu li a').on('click', function () {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
});
EDIT
You can also use load(not recommended) event callback to bind the event, but this will wait for all the resources to load completely.
If you want to use Vanilla Javascript, you can use DOMContentLoaded event on document.
106
you are executing the code before the DOM content is loaded. Place your code in a ready block.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
