Question

我想使用jquery的.load()函数动态加载内容。我将链接存储在链接的.rel属性中。我有这样的设置：

<script>
$(document).ready(function(){

$('.sidebar_link').click(function(){

    var link = this.attr('rel');
    event.preventDefault();
    $('#content').empty();
    $('#content').load(link '#content');

});
});
</script>

<div class="main_menu">
<a class="sidebar_link" href="#" rel="photos.htm">Photography</a>
<a class="sidebar_link" href="#" rel="furniture.htm">Furniture</a>
<a class="sidebar_link" href="#" rel="services.htm">Services</a>
</div>
</div>

它没有工作 - 它似乎没有抓住rel属性的链接，我不知道为什么。有什么想法吗？

Answer 1

试试这个：

var link = $(this).attr('rel');

.attr不是本机JavaScript函数，它来自jQuery，所以你必须使用jQuery包装this

而且：

$('#content').load(link);

你可以传递一个id来加载片段，但是url和id必须是一个字符串文字，如$('#content').load('photos.htm #content') photos.htm页面需要在页面上有一个id内容的元素。如果您只想显示页面的全部内容，只需使用网址。

Answer 2

在您的点击处理程序this中是一个纯粹的dom元素;你需要在访问rel attribue

之前调用它上面的jQuery函数

    $('#content').load($(this).attr("rel"));

Answer 3

$('#content').load(link '#content');

这几乎肯定会引发语法错误 - 请检查您的JavaScript控制台。我想你只想要.load(link);。

在rel属性中动态加载链接。

3 个答案: