Question

大家啊，

我尝试使用this教程将内容加载到div中。我正在使用jquery。问题是，当我点击链接

<a href="about.html" class="panel">Profil</a>

它将about.html作为单独的页面加载。我尝试了几个脚本，但由于某种原因它看起来像

 $("#content").load

根本不起作用！我确信我的HTML是有效的，因为我从教程中接近1：1并且只修改了目标。

继承人的完整javascript;

$(document).ready(function() {

    // Check for hash value in URL
    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';
            $('#container').load(toLoad)
        } 

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

    var toLoad = $(this).attr('href')+' #content';
    $('#container').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() {
        $('#container').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#container').show('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').fadeOut('normal');
    }
    return false;

    });
});

可能的原因是什么？

Answer 1

您需要阻止链接的默认操作：

$("a.loader").click(function(e){
  e.preventDefault();
  $("#content").load(/* Your details here */);
});

Answer 2

返回false。让jQuery处理停止默认操作：

$(".panel").click(function ()
{
    $("#content").load();

    return false;
});

Answer 3

好吧，问题似乎在

$('#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());
    }
    alert("Text");
    function hideLoader() {
        $('#load').fadeOut('normal');
    }
    alert("Text 2");
    return false;
    });

因为在那里设置的任何警报（“文本”）都不会显示。这对你有帮助吗？

Answer 4

哦，我觉得我看到了问题......

从该教程页面开始。 index.html，about.html，portfolio.html，contact.html和term.html都是重复页面，但#content部分除外。您的about.html也包含<div id="content">，或者它只是您要加载到内容区域的页面。如果是后者，那么我会将“#content”更改为“body”，来自：

var toLoad = $(this).attr('href')+' #content';

到

var toLoad = $(this).attr('href')+' body';

Answer 5

好吧，我让它与another script合作。

使用jquery加载内容时出现问题

5 个答案: