javascript - 使用 div 中的链接更改 div 内容，该链接导致外部

Question

我有一个任务要解决，而且我对 js 和其他东西还是很陌生，所以请帮我解决这个问题。我在 php 中有这个（我使用 php，因为我也需要使用数据库）：

我想要的是在不重新加载整个页面的情况下将外部 html 内容放入容器中。让我们调用外部内容link1.html;link2.html...

加载页面时，我希望包含 link1.html 内容的容器也可用，并且可以通过单击 link1 来调用。

我尝试了 jquery 和其他东西，但它对我来说并不是真的有用。我想使用外部 js 或 ajax 或 jquery 或类似的东西。请帮忙！！！提前谢谢大家！

<div id="links">
    <ul>
        <li id="link1">link1</li>

        <li id="link2">link1</li>

        <li id="link3">link1</li>

        <li id="link4">link1</li>

    </ul>
</div>
<div id="container"></div>

Answer 1

您可以使用或用于加载内容load()，例如：$.get()$.ajax

<div id="links">
    <ul>
        <li id="link1"><a href='path'>link1</a></li>
        ...
    </ul>
</div>

$('#links a').on('click', function(event) {
   event.preventDefault();
   $('#container').load(this.href); 
});