Using the code sample here (as well as W3Schools), I am trying to learn how to build a web-page with unchanging header, nav (left margin), and footer pieces, with a section in the middle that changes based on what's clicked.
My main page (test01.html):
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#activities").click(function(){
$("#body").load("test02.html");
});
});
</script>
</head>
<body>
<div id="header">
<a href="#" id="#activities">Activities</a>
<!-- this stays the same -->
</div>
<div id="body">
<!-- All content will be loaded here dynamically -->
</div>
<div id="footer">
<!-- this stays the same -->
</div>
</body>
</html>My content that should be displayed when "Activities" is clicked (test02.html):
<p>---</p>
<p>Hello world!</p>
<p>---</p>When I click "Activities" the url (in the address bar changes to "test01.html#" but the contents of test02.html does not load.
Can anyone see what I am doing wrong?
