2

我已经创建了一个带有变量库的 php 模板，并且没有全部拉入索引页面我已经创建了一个基本脚本，在加载时淡入淡出页面并且已经让它工作了我想做的下一件事就是使用我的导航栏链接将格式化的内容拉入页面（因为我使用的是foundation 4框架）现在我尝试的代码如下

$(document).ready(function() {                     
    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                           
    });

    $('#nav li a').click(function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });
});

这个想法是 onclick 它使用包装器删除内容显示加载 gif，然后加载存储在链接中引用的页面内容

但它不起作用只是重新加载整个页面。. . . 我试过阅读，它说你可以使用

您可以使用 load 方法从另一个页面提取 >$('#targetElement').load('page.htm #container') 语法。

并使用 get 函数，但我不擅长这个 jquery 有没有一种方法可以在 php 中做到这一点，或者我在哪里做错了。

4

2 回答 2

0

当用户单击链接时，浏览器默认卸载当前页面并加载该链接指示的页面。

您需要阻止浏览器的默认行为，为此，您需要在.preventDefault()为该链接触发的点击事件上调用该方法。

$('#your-context').click(function(event) {
    event.preventDefault();
    /**
     * the rest of your code here
     */
});
于 2013-06-16T20:14:04.083 回答
0

试试这个......你调用的负载和内部功能不正确......

$('#nav li a').click(function(){

var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
//window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
    $('#content').load(toLoad,showNewContent);
}
function showNewContent() {
    $('#content').show('normal',hideLoader);
}
function hideLoader() {
    $('#load').fadeOut('normal');
}
return false;

});
于 2013-06-16T19:38:10.003 回答