0

我正在尝试使用 jquery 和 ajax 制作加载标签，我有“page-1.html、page-2.html、page-3.html、page-4.html、page-5.html”、“ page-1.html" 是我想首先显示的主页，但是我遇到了页面停止加载并且标签内容未显示的问题，只有加载类显示<div class=\"loading\"></div> 这里的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function Tabs (getFile)
{
    $.ajax({
        url: getFile,
        beforeSend: function (){
            $(".PagesContent").html("<div class=\"loading\"></div>");
        },
        success: function(data){
            $(".PagesContent").html(data);
        }
    });
}

$(document).ready(function (){

    Tabs ("page-1.html")

    $(".pages ul > li").click(function (){
        $(".pages ul > li").removeAttr("class");
        $(this).addClass("active");
        return false;
    });

});
</script>
<style type="text/css">
.loading{
    background-image:url('images/loading.gif');
    background-repeat:no-repeat;
    height:32px;
    width:32px;
    margin:15px auto;
}
</style>
<body>
    <div class="pages">
        <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Our Partners</a></li>
            <li><a href="#">Supplies</a></li>
            <li><a href="#">Set Order</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
        <div class="clear"></div>
    </div><!--End pages-->      
    <div class="PagesContent"></div><!--End Pages Contents-->

</body>
</html>

为什么错了？页面page-1.html未显示！仅显示加载 img。

4

1 回答 1

0

要确定您的时机是否正确，您可以这样做（您需要 jQuery 1.5 或更新版本）

function Tabs (getFile)
{
    return $.ajax({
        url: getFile,
        beforeSend: function (){
            $(".PagesContent").html("<div class=\"loading\"></div>");
        }
    });
}

$(document).ready(function (){

    $.when(Tabs("page-1.html"))
        .done(function () {
            $(".PagesContent").html(data);
        })
        .fail(function () {
            $(".PagesContent").html("<span class='error'>Failed to load tab.</span>");
        })

    $(".pages ul > li").click(function (){
        $(".pages ul > li").removeAttr("class");
        $(this).addClass("active");
        return false;
    });

});

如前所述；您的浏览器是否返回任何错误（在控制台中）？

于 2013-02-16T13:13:47.647 回答