Jquery load（）帮助

Question

我正在为个人网站创建一个投资组合页面。我有一个大约20个锚点的滑块链接到我处理过的项目，每个都包含一个客户端徽标，点击后应加载一些html内容，然后将该内容淡入同一页面上的容器div。

我被建议使用JQuery方法load（），这似乎是直截了当的。我的问题是，我必须为20个锚点中的每个锚点重复以下代码，因为每个锚点的URL都不同，或者是否有更有效的方法？

$('a#project1').click(function() {
   $('#work').load('ajax/project1.html');
}

我还必须首先使用unload（）方法来确保我加载的div是空的吗？非常感谢提前。

Answer 1

如果您只给锚点href和类似这样的类：

<a class="project" href="ajax/project1.html">Project 1</a>
<a class="project" href="ajax/project2.html">Project 2</a>

您可以对所有这些使用jQuery：

$('a.project').click(function() {
  $('#work').load(this.href);
}

---

解决方案2：如果您的链接位于容器中，您可以稍微更改选择器并减少重复次数，如下所示：

<div class="projects">
  <a href="ajax/project1.html">Project 1</a>
  <a href="ajax/project2.html">Project 2</a>
</div>

你要用它：

$('.projects a').click(function() {
  $('#work').load(this.href);
}

这两种方法的好处是，在禁用javascript的情况下，它们会稍微优雅地降级（取决于您的内容的外观），用户仍然可以通过点击链接查看内容。

Answer 2

要回答你的第二个问题，不，你不必使用卸载。正如load的文档所解释的那样，它会获取URL并将生成的HTML放入指定的容器中 - 就像在工作div上执行.innerHTML一样。

在最新的jQuery下，尝试：

$('#slider-id').delegate('a', 'click', function() {
    $('#work').load(this.href);
});

如果使用jQuery 1.3，请尝试：

// All anchors you want to be activated need to have the class workLink
$('a.workLink').live('click', functiON() {
    $('#work').load(this.href);
});