0

我有下一个代码来使用 JQuery 从外部 page.html 加载内容：

脚本：

<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>
4

2 回答 2

3

尝试：

<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>

更多信息在jQuery AJAX load()

于 2013-05-01T03:31:43.050 回答
1

根据您的 Last Comment，您需要在event内部作为参数传递click event handler，然后调用preventDefault，以便锚将重定向您，您已经通过objEvent.

所以代码如下所示

$( "nav ul li a").click(function( objEvent ){
   objEvent.preventDefault();
于 2013-05-01T03:31:54.087 回答