2

EDIT:

Alright, to help resolve this, I've put up the example online:
http://lodge323.com/test/index.html

The example works as intended, but it doesn't have the content that I want on it. Note that this apparently only happens on FF13 and not IE9.

Steps to recreate the problem:
-Ctrl+F5 to reload the page (overriding cache).
-Using Firebug (addon for FF), change 1.jpg to head.gif
-Click on the Inventory menu tab on the right

Notice how there's a gap between the menu and the bottom which doesn't happen if 1.jpg is used. So question is, how can I get that gif image to work properly with the page?

4

1 回答 1

3

jQuery 的加载是异步的。

与其在 loadContent 之后调用 loadSidebar，不如将其作为回调传递给load：

$(document).ready(function() {
    $(".tabs a").click(function() {
        loadContent('#ContentDiv', this, '.tabs a', 'id', loadSidebar);
    });
});

function loadContent(divTarget, elm, selector, attr, callback) {
    $(divTarget).load($(elm).attr(attr) + ' #ContentLoad', callback);
}

这将在内容完成加载时调用 loadSidebar，而不是在开始加载后立即调用。

查看了解 Javascript 中的回调函数。它可能会帮助您理解为什么需要回调。

编辑

正如 Eric 指出的那样，您还将 url 存储在 id 中的评论。您应该将其存储在href锚点的属性中。然后你可以从你的点击处理程序中返回 false 以避免加载整个页面：

$(document).ready(function() {
    $(".tabs a").click(function() {
        loadContent('#ContentDiv', this, '.tabs a', 'href', loadSidebar);
        return false;
    });
});
于 2012-06-07T16:30:24.770 回答