我尝试了很多代码,但还没有成功。主要是我在寻找使用jQuery AJAX加载页面的方法。这很简单,但我无法理解其中的问题。请参考下面的示例HTML代码,这就是我想要的效果。
以下是我尝试过的JS代码,但很多其他代码也不能正常工作...
<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>
如果你们知道针对这种类型的页面加载有什么好的解决方案,请与我分享。
谢谢。