jquery ajax загрузка страницы как?

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 & Форум. Пожалуйста, уточните http://api.jquery.com/category/effects/ для получения дополнительных функций.

Answer 2

Вы можете попробовать, как это.

$(document).ready(function(){ 

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

}); 

Answer 3

Попробуйте это, а убедившись, что путь из 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 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); 
    });