Javascript 将内容从外部或内部div动态加载到div中

我正在创建一个具有如下div的站点：

<div class="container">

    <div class="one-third column">
        <a id="tab1" href="inc/tab1.html"><h2>tab1</h2></a>
    </div>

    <div class="one-third column">
        <a id="tab2" href="inc/tab2.html"><h2>tab2</h2></a>
    </div>

    <div class="one-third column">
        <a id="tab3" href="inc/tab3.html"><h2>tab3</h2></a>
    </div>

</div>

<div class="container" style="margin:100px 0;">
    <div id="information">


    </div>

</div>

然后我希望外部页面的内容（基本上只是一个包含少量内容的div）可以用id=“information”加载到div中

我试着用这个，但它只是把我发送到一个外部页面

<script type="text/javascript"> 
$(#tab1).click(function() {
    $('#information').load("inc/tab1.html");

    return false;
});
    $(#tab2).click(function() {
    $('#information').load("inc/tab2.html");

    return false;
});
$(#tab3).click(function() {
    $('#information').load("inc/tab3.html");

    return false;
});
</script>

$（#表1）。单击（函数（）{
$（'#information'）.load（“inc/tab1.html”）；
返回false；
});
$（#tab2）。单击（函数（）{
$（'#information'）.load（“inc/tab2.html”）；
返回false；
});
$（#tab3）。单击（函数（）{
$（'#information'）.load（“inc/tab3.html”）；
返回false；
});

通过这种方式，加载新内容后，当前在div中的内容是否会被隐藏

然后我想知道如何将动画添加到加载的内容中？

尝试更改：

$(#tab2).click(function() {

    $('#information').load("inc/tab2.html");
    return false;

});

到

注意

tab2

周围的引号（除非是body，document，否则需要有引号）。

---

另外，请注意

函数（e）

中的

e

。使用该函数，您可以防止链接重定向到另一个包含

e.preventDefault（）

的页面。这是因为代码中存在多个语法错误，您缺少选择器的引号

$('#tab...').click(function() {
    // ...
});

您还可以使用

href

属性，而不是使用多个处理程序：

jQuery(function($) {
    $('.one-third a').click(function(e) {
       e.peventDefault();
       $('#information').load(this.href);
    });
})

---

向加载的内容添加动画意味着什么？信息必须存储在外部页面上吗？只需隐藏页面上已有的内容就容易多了。您可能需要在回调函数中调用e.preventDefault（），而不是返回false；e是回调函数的参数

jQuery(function($) {
    $('.one-third a').click(function(e) {
       e.peventDefault();
       $('#information').load(this.href);
    });
})