javascript - 从外部或内部 div 动态加载内容到 div

Question

我目前正在创建一个具有如下 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>

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

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

Answer 1

尝试改变:

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

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

});

到

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

    $('#information').load("inc/tab2.html");
    e.preventDefault();

});

请注意 tab2 周围的引号(除非是 body、document，否则您需要使用这些引号。 还要注意 function(e) 中的 e。有了它，您可以使用该函数内的代码 e.preventDefault() 阻止链接重定向到另一个页面。