如何有一个修复 php 网页，它有一个修复导航栏和页脚 - How to have a fix php webpage, that has a fix navigation-bar and footer

How to have a fix php webpage, that has a fix navigation-bar and footer

本文关键字：有一个导航网页 php | 更新日期: 2023-09-27

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

例如

<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或其他东西来做到这一点？

可能是

这样的：

.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();
 }

你可以使用 AJAX 来实现这一点。

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

由于您实际上没有显示任何努力，因此我相信您需要指向 AJAX 教程的链接。

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

否则，您可以对该 http://startbootstrap.com/template-categories/all/使用引导模板

打开并下载。