0

This is the index.html page

<head>
    <script src="js/jquery-1.3.js" type="text/javascript"></script>  
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>  
    <script src="js/animated-menu.js" type="text/javascript"></script>  
    <script src="js/call.js" type="text/javascript"></script>    
    <script type="text/javascript" src="js/fade.js"></script>
</head>  

<body>
    <div class="header">         
        <div class="menu">
            <ul>  
                <li class="green" >  
                    <p><a href="index.html">Home</a></p>  
                    <p class="subtext">The front page</p>  
                </li>  
                <li class="yellow" onclick="showHint(1)">  
                    <p><a href="#">About</a></p>  
                    <p class="subtext">More info</p>  
                </li>  
                <li class="red" onclick="showHint(2)">  
                    <p><a href="#">Contact</a></p>  
                    <p class="subtext">Get in touch</p>  
                </li>  
                <li class="blue">  
                    <p><a href="#">Submit</a></p>  
                    <p class="subtext">Send us your stuff!</p>  
                </li>  
                <li class="purple">  
                    <p><a href="#">Terms</a></p>  
                    <p class="subtext">Legal things</p>  
                </li>  
            </ul>
        </div>
    </div> 
    <div class="content" id="content"></div>
</body>

This is the contact.html which I'm loading via AJAX

<head>
    <script src="js/call.js" type="text/javascript"></script>
</head>

<body>
    <p>Rollover a menu item to expand it.</p>  
<h1>Hello Ajax</h1>    
</body>

Here is the fade.js file

$(document).ready(function() {
$("body").css("display", "none");
    $("body").fadeIn(2000);
});

And finally here is the ajax call

var XMLHttpRequestObject;
    if(window.XMLHttpRequest)
    {
        XMLHttpRequestObject=new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
        XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
    }
    function showHint(ide) {
        if(XMLHttpRequestObject)
        {
            XMLHttpRequestObject.onreadystatechange=function() {
                if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
                {
                    document.getElementById("content").innerHTML=XMLHttpRequestObject.responseText;
                }
            }
            if(ide=="0")
            {
                XMLHttpRequestObject.open("GET","index.html",true);
            }
            else if(ide=="1")
            {
                XMLHttpRequestObject.open("GET","about_me.htm",true);
            }
            else if(ide=="2")
            {
                XMLHttpRequestObject.open("GET","contact.htm",true);
            }
        XMLHttpRequestObject.send();
    }
}

The problem is that when I'm calling the contact page separately, the fade effect is working. But when I'm loading the contact.html via AJAX, the jQuery effect is not working. Please help.

4

1 に答える 1

2

contact.htmlまた、以下に示すように、必要なすべてのライブラリを に含める必要があります。

<head>
    <script src="js/jquery-1.3.js" type="text/javascript"></script>  
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>  
    <script src="js/animated-menu.js" type="text/javascript"></script>  
    <script src="js/call.js" type="text/javascript"></script>    
    <script type="text/javascript" src="js/fade.js"></script>
</head>

編集：

最初に、jQuery の ajax ( http://api.jquery.com/category/ajax/ ) の使用方法を学習する必要があります。可能であれば、最新バージョンのライブラリも含めてください。

2番目に、ajax呼び出しのたびに体にフェードイン効果が必要だと思います。その場合、contact.htm には本文のコンテンツのみが必要です。以下にすべてをまとめます。

<html>
<head>
    <script src="js/jquery-1.3.js" type="text/javascript"></script>  
     <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>  
     <script src="js/animated-menu.js" type="text/javascript"></script>    
    <script type="text/javascript">
    var XMLHttpRequestObject;
    if(window.XMLHttpRequest)
    {
        XMLHttpRequestObject=new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
        XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
    }
    function showHint(ide) {
        if(XMLHttpRequestObject)
        {
            XMLHttpRequestObject.onreadystatechange=function() {
                if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
                {
                    document.getElementById("content").innerHTML=XMLHttpRequestObject.responseText;

                    $("body").css("display", "none");
                    $("body").fadeIn(2000);
                }
            }
            if(ide=="0")
            {
                XMLHttpRequestObject.open("GET","index.html",true);
            }
            else if(ide=="1")
            {
                XMLHttpRequestObject.open("GET","about_me.htm",true);
            }
            else if(ide=="2")
            {
                XMLHttpRequestObject.open("GET","contact.htm",true);
            }
        XMLHttpRequestObject.send();
    }
}
    </script>    
    <script type="text/javascript">
    $(document).ready(function() {
$("body").css("display", "none");
    $("body").fadeIn(2000);
});
    </script>
</head>  

<body>
    <div class="header">         
        <div class="menu">
            <ul>  
                <li class="green" >  
                    <p><a href="index.html">Home</a></p>  
                    <p class="subtext">The front page</p>  
                </li>  
                <li class="yellow" onclick="showHint(1)">  
                    <p><a href="#">About</a></p>  
                    <p class="subtext">More info</p>  
                </li>  
                <li class="red" onclick="showHint(2)">  
                    <p><a href="#">Contact</a></p>  
                    <p class="subtext">Get in touch</p>  
                </li>  
                <li class="blue">  
                    <p><a href="#">Submit</a></p>  
                    <p class="subtext">Send us your stuff!</p>  
                </li>  
                <li class="purple">  
                    <p><a href="#">Terms</a></p>  
                    <p class="subtext">Legal things</p>  
                </li>  
            </ul>
        </div>
    </div> 
    <div class="content" id="content"></div>
</body> 
</html>

あなたの contact.html:

<p>Rollover a menu item to expand it.</p>
于 2013-04-10T06:02:52.250 に答える