AJAX和jQuery的負載錨

Question

我有下面的代碼使用加載外部page.html中內容的JQuery：

SCRIPT：

<script type="text/javascript">  
$(
function(){ 
var jContent = $("#content"); 

$("nav ul li a").click(function(objEvent){ 
var jLink = $(this); ... 

HTML

<nav> 
<ul> 
<li><a href="page1.html">Page 1</a></li> 
<li><a href="page2.html">Page 2</a></li> 
<li><a href="page3.html">Page 3</a></li> 
</ul> 
</nav> 


<div id="content">Here load content</div> 

該腳本工作正常，但是...我想要一些內容將它們加載到一個特定的錨點（page1.html＃anchor）

http://www.libelulastudio.com/demo/ajax/01/

我應該添加到我的腳本中？由於

///////////////////////

你好終於用下面的代碼解決：

<script> $(document).ready(function(){ $("a#dos").click(function(){ 
     $("#content").load("page2.html", function(responseTxt,statusTxt,xhr){ 
     if(statusTxt=="success") 
     $(function() { 
    $(document).scrollTop($("#p2").offset().top); }); 
     if(statusTxt=="error") 
     alert("Error: "+xhr.status+": "+xhr.statusText); 
     }); 
    }); ... 

HTML

<a href="#" id="dos">Go to Product 2</a> 

<div id="content">... content ... </div> 

Answer 1

嘗試：

<script lang='javascript'> 
     $(document).ready(function(){ 
      $('.ajaxload').click(function(){ 
       $('#content_div').load($(this).attr('id')+'.html'); 
      }); 
     }); 
</script> 

<nav> 
    <ul> 
     <li><a class='ajaxload' href="javascript:void(0)" id='page1'>Page 1</a></li> 
     <li><a class='ajaxload' href="javascript:void(0)" id='page2'>Page 2</a></li> 
     <li><a class='ajaxload' href="javascript:void(0)" id='page3'>Page 3</a></li> 
     <li><a href='#page4_content'>Page 4</a></li> 
    </ul> 
</nav> 

<div id='content_div'> 
    <!--Here your content gets loaded--> 
</div> 
<div id='page4_content'> 
    <!--Page 4 content here--> 
</div> 

更多INF Ø在jQuery AJAX load()

Answer 2

根據您最後的評論，你需要通過event作爲參數內click event handler然後調用preventDefault所以錨將重定向你，你已經通過objEvent.

所以代碼看起來像下面

$("nav ul li a").click(function(objEvent){ 
    objEvent.preventDefault();