Question

我尝试了很多代码，但还没有成功。主要是我在寻找jquery ajax加载页面。它非常简单，但我无法弄明白。请参阅下面的示例HTML代码。我想要的。

    <div class="menu">
    <ul>
    <li><a href="#tabs-1" id="page1">page 1</a></li>
    <li><a href="#tabs-2"  id="page2">page 2</a></li>
    <li><a href="#tabs-3"  id="page3">page 3</a></li>
    <li><a href="#tabs-4"  id="page4">page 4</a></li>
    <li><a href="#tabs-5"  id="page5">page 5</a></li>
    </ul>
    </div>


 <div class="contentarea" id="response">

        </div>

贝娄是js代码我试过很多其他也没有正常工作....

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>
    $(document).ready(function(){
    // load index page when the page loads
    $("#response").load("page1.html");
    $("#page1").click(function(){
    // load home page on click
        $("#response").load("page1.html");
    });
    $("#page2").click(function(){
    // load about page on click
        $("#response").load("page2.html");
    });
    $("#page3").click(function(){
    // load contact form onclick
        $("#response").load("page3.html");
    });
});

</script>

如果你们知道该类型加载页面的任何好的解决方案。请与我分享。

感谢

Answer 1

我已经把你的代码整理了一下，并将.load（）转换为.html（）以便在jsFiddle中进行测试。代码正在运行，您将在此处看到：

http://jsfiddle.net/Routh/cqJ6Q/

$(document).ready(function () {
    // load index page when the page loads
    $("#response").html("DEFAULT");
    $("#page1").click(function () {
        // load home page on click
        $("#response").html("TESTING 1");
    });
    $("#page2").click(function () {
        // load about page on click
        $("#response").html("TESTING 2");
    });
    $("#page3").click(function () {
        // load contact form onclick
        $("#response").html("TESTING 3");
    });
    $("#page4").click(function () {
        // load contact form onclick
        $("#response").html("TESTING 4");
    });
    $("#page5").click(function () {
        // load contact form onclick
        $("#response").html("TESTING 5");
    });
});

每按一次按钮，输出就会改变。我可以看到它不适合你的唯一原因是HTML文件没有被正确引用。

你有任何控制台输出吗？

<强>已更新

这里修改了jsFiddle以使内容淡入而不仅仅是加载：

http://jsfiddle.net/Routh/cqJ6Q/1/

我改变了这个：

$("#response").html("TESTING 1");

对此：

$("#response").hide().html("<h1>Page 1</h1><p>Page 1 has been loaded</p>").fadeIn('slow');

您可以使用更多效果和技巧组合，但这超出了本Q＆amp; A论坛的范围。请检查http://api.jquery.com/category/effects/以了解更多功能。

Answer 2

尝试此操作，同时确保html文件的路径准确无误 -

<div class="menu">
    <ul>
    <li><a href="#tabs-1" id="page1" title="page1">page 1</a></li>
    <li><a href="#tabs-2"  id="page2" title="page2">page 2</a></li>
    <li><a href="#tabs-3"  id="page3" title="page3">page 3</a></li>
    <li><a href="#tabs-4"  id="page4" title="page4">page 4</a></li>
    <li><a href="#tabs-5"  id="page5" title="page5">page 5</a></li>
    </ul>
    </div>
 <div class="contentarea" id="response">
 </div> 


<script>
$(document).ready(function(){
     $(".menu a").click(function(){
        var title = this.title;
        var responseDiv = $("#response");
        $(responseDiv).empty().load(title + ".html", function(response, status, xhr){
            // function to call after the load.
            if (response == "error") {
                // Error occured
            }
            else {
                // Success
            }
        });
    });
});

</script>

Answer 3

你可以这样试试。

$(document).ready(function(){

    $("#page1").click(function(){
    // load home page on click
        $("#response").html($('body').load("page1.html"));
    });

});

Answer 4

这样，你就可以做到。我在www.sambook.ir上使用旗帜图标。

$('li a').click(function(){
            var address = $(this).attr('href')+ " #id(every section you want. be careful about the space before numbersign#)";
            $("#previews").empty("#response");
            $("#previews").load(address);
    });

jquery ajax页面加载如何？

4 个答案: