我不仅仅是一个JavaScript的新手。我正在开发一个简单的网站来熟悉Web编程。这个网站很简单,结构如下:
- 一个基于ul/li/css的简单导航菜单
- 当用户点击适当的菜单项时,子页面将使用jQuery加载到“div”中。
- 一些子页面使用不同的基于jQuery的插件,如LightWindow、jTip等。
加载子页面的jQuery函数如下:
function loadContent(htmlfile){
jQuery("#content").load(htmlfile);
};
菜单项会触发 loadContent 方法,例如:
<li><a href="javascript:void(0)" onclick="loadContent('overview.html');return false">overview</a></li>
这个代码会在“div”内加载一个子页面,名字为“overview.html”。
目前这个功能还是好使的,但是有些用基于jQuery插件的子页面在“div”内加载时无法正常工作。如果单独在浏览器中加载它们,则它们能够正常工作。
基于以上情况,我有几个问题:
大多数插件都是基于jQuery的,子页面是通过“loadContent”函数加载到“index.html”中的。我需要在每个子页面中都调用
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
吗?
如果一个页面使用了自定义的jQuery插件,那我应该在哪里调用它?在“index.html”中还是在使用它的页面中?
我认为,所有在“index.html”中调用的脚本都不需要在任何子页面中再次调用。我这么想对吗?
我所有的子页面都类似于这个例子:screenshot.html。当我在浏览器中本地加载时,一切正常,但是在“index.html”中使用jQuery的load()函数加载时无法正常工作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous/scriptaculous.js'></script>
<script type='text/javascript' src='js/lightview.js'></script>
<link rel="stylesheet" type="text/css" href="css/lightview.css" />
</head>
<body>
<h3 style="text-align:left;">Screenshots</h3>
<div align="center">
<a class="lightview" href="images/ss_win1.png" title="Title"><img src="images/ss_win1_thumb.png" alt="" class="whiteborder"/></a>
<a class="lightview" href="images/ss_win2.png" title="Title"><img src="images/ss_win2_thumb.png" alt="" class="whiteborder"/></a>
<a class="lightview" href="images/ss_win3.png" title="Title"><img src="images/ss_win3_thumb.png" alt="" class="whiteborder"/></a>
</div>
</body>
</html>