Trying to get content from other pages to load into specific Div from url on click . But for some reason it will not work. The link keeps forwarding to the page instead of opening in the div. On top of that the initial load code works. It loads the initial content. after setting an alarm to notify my when I click the link with the desired content it sends the alert. Then I put return false; at the end and now it doesn't load anything. What am I doing wrong. Im using the code that I used a year ago on here. but now its not working on my new website. Please help me determine how to fix this.
Here is my AJAX code:
$(document).ready(function () {
$('#main').load('pages/home.php');
$('ul#navMenu li a').click(function() {
var page = $(this).attr('href');
$('main').load('pages/' + page + '.php');
return false;
});
});
Here is my HTML:
<body class="">
<div class="container">
<div class="menu-wrap">
<nav class="menu">
<div class="link-list">
<center>
<ul id="navMenu">
<li><a href="pages/home.php"><span>HOME</span></a></li>
<li><a href="pages/artist.php"><span>TALENT</span></a></li>
<li><a href="#"><span>SERVICES</span></a></li>
<li><a href="#"><span>MUSIC</span></a></li>
<li><a href="#"><span>BEATS</span></a></li>
<li><a href="#"><span>VIDEOS</span></a></li>
<li><a href="#"><span>CONTACT US</span></a></li>
</ul>
</center>
</div>
</nav>
</div>
<button class="menu-button" id="open-button"><img src="img/menubutt.png" height="42" width="42"><span>Open Menu</span></button>
<div class="content-wrap">
<div id="main">
</div>
</div><!-- /content-wrap -->
</div><!-- /container -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax.js"></script>
<script src="js/classie.js"></script>
<script src="js/main.js"></script>
And, here's the website testing on my server:
