Question

如果我正在创建一个网站，那么将新页面放到导航栏上的最快方法是什么，并且可以从每个页面看到。每次创建新页面时，导航栏都会更新，然后我必须将新代码复制并粘贴到我站点中的每个页面代码上（我想。）我刚刚完成了主页，所以它不是这是一个问题，但我不想继续，直到我把这个问题理顺，所以我不会在以后遇到麻烦。有没有办法将导航栏的代码放到不同的HTML文件上，然后将页面链接到它，以便它们都保持同步？对不起，如果这令人困惑，但请帮助我。非常感谢，我是HTML和CSS的新手，但我愿意学习优化这一点所需的一切。

更新：我现在使用PHP命令工作：

<?php include 'PHP/nav_bar_code.php'; ?>

Answer 1

基本的AJAX或XMLHTTPRequest调用是（不依赖于库）：

<script>
function loadNavigation() {
  var xmlhttp;
  if( window.XMLHttpRequest ) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp=new ActiveXObject( "Microsoft.XMLHTTP" );
  }
  xmlhttp.onreadystatechange=function() {
    if( xmlhttp.readyState==4 && xmlhttp.status==200 ) {
      //--- change this to your navigation element
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  //--- change the filename to the navigation file
  xmlhttp.open("GET","ajax_info.txt",true);
  xmlhttp.send();
}
</script>

指定文件名时，请注意以上内容将在平面文件系统中运行，并且您可能必须指定导航文件的完整URL路径，因为您使用的是多级文件结构 - 如果这有意义的话。

Answer 2

有几种方法可以实现这一目标。一个简单的方法是使用CMS来创建您的网站。像WordPress，Joomla，Drupal，Plone等...... 另一种方法可能是使用评论中提到的AJAX。 jQuery为此提供了一种简单的方法。你要做的就是在每个页面的头部创建一个div并使用.load（）方法加载你的页眉。使用ajax将页面加载到框架中可能是一个更好的设计。这是您布置主页面并设置内容容器的位置，您的每个后续页面都会加载到该容器中...

另一种方法是使用php文件和include命令来包含标题页。更多信息here。

如果你热衷于进入AJAX，那么这本书很棒 - http://www.apress.com/9781590596678

如何在网页上同步导航栏更改

2 个答案: