2013-07-31 137 views
1

如果我正在制作网站,那么将新页面放到导航栏上并从每个页面都可以看到的最快方式是什么?每次创建新页面时,导航栏都会更新,然后我必须将新代码复制并粘贴到我网站上的每个页面的代码中(我认为)。我刚刚完成了主页,因此它不是还有一个问题,但我不想继续下去,直到我解决了这个问题,所以我最终不会陷入麻烦。有什么方法可以将导航栏的代码放到不同的HTML文件中,然后将页面链接到它,以便它们都保持同步?对不起,如果这是令人困惑,但请帮助我。非常感谢你,我对HTML和CSS相当陌生,但我愿意学习优化这个所需的任何东西。如何使导航栏在网页上更改同步

更新:我现在使用PHP命令这方面的工作:

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

+0

您可以将导航块放置在单独的文件(所有HTML代码)中。然后,使用AJAX将文件加载到页面中。 – jeff

+0

请参阅下面的答案,了解您可以使用的基本AJAX功能。 – jeff

回答

1

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

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

如果你是热衷于进入AJAX,那么这本书是伟大的 - http://www.apress.com/9781590596678

+0

非常感谢您的帮助和建议。我想我会用AJAX来做到这一点。 –

+0

我可以在PHP中使用服务器端吗?如果是这样,那有多难? –

+1

我会建议在服务器端使用php或任何你使用的语言来做到这一点。通过ajax加载你的导航有一些严重的SEO后果,再加上你的用途将不得不等待看到主导航。一个非常简单的包含文件在PHP中会做到这一点。 <?php include('/ header.php'); ?> – jhanifen

2

基本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路径,因为您使用的是多级文件结构 - 如果有意义的话。

+0

非常感谢。你救了我很多时间试图弄清楚。 –

+0

你可以请upvote答案或标记为正确的。这是SO的工作方式。 – jeff

+0

对不起,我标记为正确的,但是是一个新用户,并且无法登记。 –