javascript - 如何从未指定的 html 加载片段？

Question

使菜单消失后，如果不列出特定的 html，我将无法显示我的内容。

这是HTML：

<div id="header">
<h1>N300 Project Gallery</h1>
</div>
<div id="container">
<div id="utility">
<ul>
    <li><a href="about.html">About</a></li>
    <li><a href="projects.html">Projects</a></li>

</ul>

</div>
    <div id="index-content">?</div>
    <div id="footer">This is the footer</div>
</div>

这是我的脚本：

$(document).ready(function() {

    $('#utility a').click(function(e){
        e.preventDefault();
        $('#utility').hide('normal',loadContent);
    });
    function loadContent() {
        $('#index-content').load(url+ '#content')
    }
});

这是我要移动的片段：

<div id="content">
    <p>Hello! My name is Brittany Shephard.</p>
</div>

Answer 1

urlin从哪里来loadContent()？

如果您需要从e.targethref 属性传递它，请为 hide 的回调创建一个匿名函数，并从传递 url 到 loadContent。像：

$(document).ready(function() {

    $('#utility a').click(function(e){
        e.preventDefault();
        $('#utility').hide('normal', function() {
            loadContent($(e.target).attr('href'));
        });
    });

    function loadContent(url) {
        $('#index-content').load(url + ' #content');
    }
});

Answer 2

请注意，如果您想要片段加载行为（而不是），则#content在传递给的 URL之前需要一个额外的空格。.load()+ ' #content'+ '#content'

您的片段位于单独的文件中，对吗？

假设您的片段是从返回的projects.html #content，请尝试：

function loadContent() {
    $('#index-content').load($(this).attr('href')+ ' #content');
}

从JQuery 文档中的 hide，this被设置为回调中隐藏的 DOM 节点。我假设您想从隐藏的锚加载 URL，因此您需要href从该节点获取属性。