0

我正在使用 ajax .load 函数在我的网站上加载内容和图像。单击链接后，我希望将目标内容（带有#sub-content 的任何页面）动态加载到#content div中。到目前为止，代码可以加载内容。但是，在第一次加载任何页面时，似乎整个页面仍在浏览器中重新加载。更具体地说，单击链接时，带有导航和标题的左侧边栏区域会闪烁。直到第一次加载页面并缓存在浏览器中，然后再次单击加载功能才能按我想要的方式工作。也就是说，加载内容而不重新加载整个页面，即侧边栏和导航。

那么问题是如何使此代码工作以链接到所需的页面并将其加载到#content div中而无需在初始单击时重新加载整个页面？（我以前使用 iframe 来加载内容，但这种方法显然是最新的，我希望我可以让它工作）。谢谢！！

网站网址：www.adamclarkart.com

编码：

 // Part 1
$(document).ready(function(){
    $("#content").load("beach-1.html");
});

$(function(){

        $('#illustrationsSection a').click(function(){
            location.hash=$(this).attr('href').match(/(^.*)\./)[1]
            return false
        })

        $('#sketchesSection a').click(function(){
            location.hash=$(this).attr('href').match(/(^.*)\./)[1]
            return false
        })

        $('#motionTab a').click(function(){
            location.hash=$(this).attr('href').match(/(^.*)\./)[1]
            return false
        })

        $('#infoTab a').click(function(){
            location.hash=$(this).attr('href').match(/(^.*)\./)[1]
            return false
        })

        $('#info a').click(function(){
            location.hash=$(this).attr('href').match(/(^.*)\./)[1]
            return false
        })
// Part 2 
        var originalTitle=document.title
        function hashChange(){
            var page=location.hash.slice(1)
            if (page!=""){
                $('#content').load(page+".html #sub-content")
                document.title=originalTitle+' – '+page
            }
        }

// Part 3, ajax spinner .gif
    $('html')
    .ajaxStart(function(){
        $(this).addClass('ajax-spinner')
    })
    .ajaxStop(function(){
        $(this).removeClass('ajax-spinner')
    })

// Part 4
        if ("onhashchange" in window){ // cool browser
            $(window).on('hashchange',hashChange).trigger('hashchange')
        }else{ // lame browser
            var lastHash=''
            setInterval(function(){
                if (lastHash!=location.hash)
                    hashChange()
                lastHash=location.hash
            },100)
        }
    })
4

1 回答 1

0

我将为这些链接应用一个类，以便我可以在 jQuery 选择器上轻松选择

<a href="media.php" class="ajaxLink">Media</a>
<a href="photos.php" class="ajaxLink">Photos</a>
<a href="contact.php" class="ajaxLink">Contact</a>

脚本

$(function(){

  $(".ajaxLink").click(function(e){
   e.preventDefault();
   $("#content").load($(this).attr("url"));   
  });

});
于 2012-05-03T18:22:59.767 回答