修正ナビゲーションバーとフッターを持つ修正PHP Webページの作成方法

Question

同じ水平ナビゲーションバーとフッターを持つWebページを作成したいと思いますが、内容は動的にロードされます。ユーザはナビゲーションバーをクリックする。用

元

<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も使用している場合、jqueryには関数が組み込まれています。 http://www.w3schools.com/jquery/jquery_ajax_intro.asp

あなたの側に文字通り何も表示されていないので、私はAJAXチュートリアルへのリンクが必要であると信じています。 https://www.codecademy.com/courses/my-first-webpage/0/1

Answer 3

シンプルなウェブサイトのデモは、それ以外の場合、あなたはそのhttp://startbootstrap.com/template-categories/all/

開き、これを、ダウンロード用のブートストラップテンプレートを使用することができます。このような多分