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周围的引号（除非是正文，否则需要这些引号。另请注意e中的function(e)。这样，您可以阻止链接重定向到该函数内部代码为e.preventDefault()的其他页面。

Answer 2

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

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

您还可以使用href属性，而不是使用多个处理程序：

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

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

2 个答案: