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が表示されません！読み込み中の画像のみが表示されます。

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 に答える