Jquery load（）帮助

我正在为m个人网站创建一个公文包页面。我有一个带有大约20个锚的滑块，链接到我所从事的项目，每个滑块都包含一个客户端徽标，单击该徽标时应加载一些html内容，然后将该内容淡入同一页面上的容器div中

有人建议我使用JQuery方法load（），这似乎很简单。我的问题是，我是否必须为20个锚中的每一个重复以下代码，因为每个锚的url都不同，还是有更有效的方法

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

---

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

如果您只需给锚定一个

href

和这样一个类：

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

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

---

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

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

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

---

这两种方法的好处是，禁用javascript后，它们的性能会有一定程度的下降（取决于您的内容外观），用户仍然可以通过单击链接查看内容。

如果您只给锚定一个

href

和这样的类：

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

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

---

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

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

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

---

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

要回答第二个问题，不，您不必使用卸载。正如的文档所解释的那样，它获取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);
});

---

要回答第二个问题，不，您不必使用unload。正如的文档所解释的那样，它获取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);
});

---

@justkt-如果“活跃”的话，

delegate

和

live

与常规的

bind

相比，是否存在某种开销不需要前两个函数中的任何一个？这里做了一些分析来回答这个问题：@justkt-如果不需要前两个函数的“活跃性”，那么

委托

和

活动

是否会有某种开销，而不是常规的

绑定

？这里做了一些分析来回答这个问题：