Как создать веб-страницу исправления php, которая имеет фиксированную навигационную панель и нижний колонтитул

Question

Я хотел бы иметь веб-страницу, которая имеет ту же горизонтальную навигационную панель и нижний колонтитул, но содержимое будет загружаться динамически, в зависимости от того, что пользователь нажимает на навигационную панель.

экс

<div class="nav-bar"> 
/* this is always same mainTemplate.php */ 
</div> 

<div class="main-content"> 
/* here i load different pages like content1.php or content2.php or content3.php, depending what the user clicks on the different nav-bar sections/buttons */ 
</div> 

<footer> 
/* this is always same mainTemplate.php */ 
</footer> 

, как сделать это с Javascript или AJAX или PHP или что-то?

Answer 1

, как это может быть:

PHP:

<div class="nav-bar"> 
/* this is always same mainTemplate.php */ 
<ul> 
    <li id="op1">op1</li> 
    <li id="op2">op2</li> 
    <li id="op3">op3</li> 
</div> 

<div class="main-content"> 
/* here i load different pages like content1.php or content2.php or content3.php, depending what the user clicks on the different nav-bar sections/buttons */ 
</div> 

<footer> 
/* this is always same mainTemplate.php */ 
</footer> 

<script src="yourScript.js" type="text/javascript"></script> 

JS: (yourScript.js)

(function(){ 
    var elems = document.getElementsByTagName("li"); 
    for(idx = 0; idx < elems.length; idx++){ 
     elems[idx].addEventListener("click", menuClick, false); 
    } 
    loadDoc("homePage.html"); 
})(); 

function menuClick(li){ 
     li.stopPropagation(); 
     li.stopImmediatePropagation(); 
     if(li.target.getAttribute("id") == "op1"){ 
     loadDoc("yourContentPage.php"); 
     } 
     if(li.target.getAttribute("id") == "op2"){ 
     loadDoc("yourContentPage2.php"); 
     } 
     if(li.target.getAttribute("id") == "op3"){ 
     loadDoc("yourContentPage3.php"); 
     } 
} 

function loadDoc(yourContentPage) { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
      document.getElementById("main-content").innerHTML = xhttp.responseText; 
     } 
    }; 
    xhttp.open("POST", yourContentPage, true); 
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xhttp.send(); 
} 

Answer 2

Для этого можно использовать AJAX.

Если вы также используете jquery, у него есть встроенные функции для него. См. http://www.w3schools.com/jquery/jquery_ajax_intro.asp

Поскольку на вашей стороне не видно усилий, я считаю, что ссылка на учебник AJAX - это то, что вам нужно.

Answer 3

Простой сайт демо https://www.codecademy.com/courses/my-first-webpage/0/1

В противном случае вы можете использовать загрузочный шаблон для этого http://startbootstrap.com/template-categories/all/

Открыть эту и скачать.