Question

我，我试图用jquery＆amp; 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。

Answer 1

要确定您的时机是否正确，您可以这样做（您需要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;
    });

});

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

Ajax加载选项卡不起作用

1 个答案: