我曾是ASP的热衷用户,非常喜欢它,但由于某些原因,我决定使用基于Linux的服务器来建立我的网站。尽管我甚至还没有开始构建我的网站,却已经在为一个看起来极其简单的任务而烦恼,即:加载一个常量导航栏。
基本上,我的目标是有一个模板页面 - 单一的布局 - 动态加载我从另一个页面创建的内容。例如:
index.html将“navi.html”加载到标有“navigation”的div中,将“banner.html”加载到标有“banner”的div中,等等...因此,当用户点击链接时,它不会刷新整个页面,而是改变“main”div中的内容。使用ASP,这非常简单,然而在我的研究中,迄今为止我找到的最好方法是使用jQuery将HTML加载到div中 - 唯一的问题是它对我不起作用,我不知道为什么,也找不到原因。
下面是代码:
基本上,我的目标是有一个模板页面 - 单一的布局 - 动态加载我从另一个页面创建的内容。例如:
index.html将“navi.html”加载到标有“navigation”的div中,将“banner.html”加载到标有“banner”的div中,等等...因此,当用户点击链接时,它不会刷新整个页面,而是改变“main”div中的内容。使用ASP,这非常简单,然而在我的研究中,迄今为止我找到的最好方法是使用jQuery将HTML加载到div中 - 唯一的问题是它对我不起作用,我不知道为什么,也找不到原因。
下面是代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ace8i</title>
</head>
<body>
<div id="navigation">
nav div tag is here
</div>
<p onclick="">test</p>
<script type="text/javascript" src="js/jquery.js">
$(document).ready(function(){
$('#navigation').load('navi.html');
});
</script>
</body>
</html>
我基本上是按照在网上找到的其他三篇帖子中的方法创建的,我尝试在头部和正文中使用它。我还尝试过将加载函数包装在document.ready函数中和不包装。没有错误,只是没有导航栏。