3

我尝试了很多代码，但还没有成功。主要是我在看 jquery ajax 加载页面。它非常简单，但我无法弄清楚prople。请参阅下面的示例 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>

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

谢谢

4

4 回答 4

3

我已经把你的代码整理了一下，并把 .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');

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

于 2013-09-07T07:14:15.583 回答
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 (status == "error") {
                // Error occured
            }
            else {
                // Success
            }
        });
    });
});

</script>
于 2013-09-07T07:13:02.587 回答
1

你可以这样试试。

$(document).ready(function(){

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

});
于 2013-09-07T07:11:58.880 回答
0

这样，你就可以做到。我在 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);
    });
于 2014-01-10T23:01:42.467 回答