Question

我想有一个网页，它有相同的水平导航栏和页脚，但内容将动态加载，具体取决于用户点击导航栏的内容。

for ex

<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

您可以使用AJAX。

如果你也使用jquery，它已经内置了函数。见http://www.w3schools.com/jquery/jquery_ajax_intro.asp

由于您没有显示任何努力，我相信您需要一个指向AJAX教程的链接。

Answer 2

像这样可能：

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 3

简单网站演示https://www.codecademy.com/courses/my-first-webpage/0/1

否则，您可以为http://startbootstrap.com/template-categories/all/

使用引导程序模板

打开并下载。

如何修复php网页，它有一个修复导航栏和页脚

3 个答案: