I have this code in header.html:
<nav role="navigation">
<ul class="nav">
<li><a id="home" href="index.html" class="current">home</a></li>
<li><a id="about" href="includes/test.html">about</a></li>
<li><a id="resources" href="#">resources</a></li>
<li><a id="archive" href="#">archives</a></li>
</ul>
</nav>
Now, everything seems fine until my index.html loads files from another folder to fill the divs with id="header", id="content" and id="footer" using:
$(function() {
$("#mainhead").load("templates/header.html");
$("#content").load("templates/content.html");
$("#footer").load("templates/footer.html");
});
My question is - How can I replace content in the div id="content" with the one from another HTML page that can be accessed by clicking a link in the nav menu?
Change the code that loads the navigation to this...
$("#mainhead").load("templates/header.html", function() {
$(this).find(".nav a").on("click", function(e) {
e.preventDefault(); // stop the link from firing as normal
$("#content").load(this.href); // load the file specified by the link
});
});
This will "ajaxify" the links in the header navigation, after it has loaded, so that the content div is loaded for each of the links, without having to navigate away from the page. Just make sure each header link has the correct href value for the content you want it to load.
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加