Javascript 使用div中的链接更改div内容，该链接将导致externa

我有一个任务要解决，我对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>

链接1
链接1
链接1
链接1

您可以使用

load（）

、

$.get（）

或

$.ajax

加载内容，例如：

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

---

问题不清楚。用代码引用解释。jQuery是解决这个问题的方法。我明白了。jQuery是用javascript编写的。Ajax是javascript加载内容的方式，如果jQuery使用Ajax。你的术语有点离谱（谢谢你的解释：）大约两周前，我甚至不知道什么是html。所以我知道我的术语很烂

• link1
• link1
• link1
• link1
/ul>其中link1将link1.html置于容器中，link2将link2.html置于容器中，link3将link3.html置于容器中，link4将link4.html置于容器中。默认情况下，我希望加载页面时link1.html位于#容器中。好的，我应该将容器内容的来源放在哪里？如果加载页面时link1.html已经位于容器中，我应该怎么做？

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