PHP - Page Building and Formatting with PHP - php

Question

So I'm trying to build an informational page on my website that is fairly expansive, enough so that it has it's own Nav and Sub-nav.
The nav is currently built and now I need to introduce and link the content to appear the way that I want it to, but that's where I'm beginning to get lost in how I should structure it efficiently. I'll try to give as detailed a run-down of the structure it lives is as possible.
First of all, all of this must happen on one page of the site. The links in the navigation should trigger different content, but in interacting with this Nav one should never leave the page (I suppose reloading it is okay, but not preferable).
The page is loaded from a "template.php" that basically just has different div's that contain a function $definepage to load their content.
Something like:
<div class="middleArea" id="infoPage">
<div id="Nav" class="content">
<?php require($definepage); ?>
</div>
<div class="returnNav"><img>backbutton</img></div>
</div>
I want to add a separate div in this template that will be for showing the user's desired content dynamically without leaving the page. So if "Item 6a" is chosen this div will be loaded with the item's corresponding content, then if "Item2b" is chosen the div instead is loaded with that item's content - with the previous content no longer there.
I have about eight Main Nav items and six of them have multi-item subnavs. So there's a lot of content which is why I didn't want to have it all existing on the page and simply hidden and shown with the links for page load reasons.
But I need the links from the first div (in the template) to load the correct .php in the (to be) content area div, as well as stay "active" while the corresponding php is loaded to remain highlighted - show that that link's info is currently being shown.
Can this be accomplished through a href="#anchors"? Or can I somehow have the content area exist in the same div of the template, but still load from external php so all of it doesn't have to load with the page? (I figured php within php within php was a bad idea)

Answer 1

If you want to load some content without reloading the page, you may use AJAX.

Answer 2

You should use JavaScript to change the content of the page without reloading it/changing the URL, using AJAX calls as mentioned by #antoyo to transfer data between the server and client as needed.

Answer 3

Here's an example for an ajax request with jQuery:
http://jsfiddle.net/dj50uev5/1/
HTML:
<div id="placeholder">
</div>
<input type="button" value="Ajax Call Test" />
Javascript:
$('input').click(function() {
$.ajax({
url: "internalUrlOrFile.txt",
context: document.body
}).success(function(data) {
$('#placeholder').html( data );
});
});
I can't really provide a working sample where the content is added automatically due to cross domain origin policies.
Let me know if you need further clarification.

Answer 4

Possible Solution:
What if I use iframe to load a "separate site" as a separate directory in my site's root folder whose pages would contain the needed content. The links in the Nav would then be URLs pointing to the corresponding page in the "content site"?
Any glaring functionality issues here? On paper it looks like it would work.
*(Please disregard the previous idiom's ironic use for the web medium)