jquery - 隐藏相同的div并在加载时显示它

Question

我看到了很多关于此的帖子，但我正在寻找更具体的内容。

当我在本地主机上应用此代码时，它可以 100% 工作，但是当我从主机测试它时，它以相同的速度闪烁，但继续显示之前的 div 内容，同时需要 1 秒才能更改其内容。

这就是我正在讨论的问题:

编辑:抱歉，链接不可用。

这是我使用的代码:

$(document).ready(function(){
$('#inicio').children().addClass('selected');

$('#inicio').on('click', function(){
    $('nav ul a').find('.selected').each( function(){
        $(this).removeClass('selected');
    });
    $('article').load('inicio.html').hide().fadeIn();
    $(this).children().addClass('selected');
});

$('#consultar_pedido').on('click', function(){
    $('nav ul a').find('.selected').each( function(){
        $(this).removeClass('selected');
    });
    $('article').load('consultapedidos.php').hide().fadeIn();
    $(this).children().addClass('selected');
});
$('#acerca_de').on('click', function(){
    $('nav ul a').find('.selected').each( function(){
        $(this).removeClass('selected');
    });
    $('article').load('acerca.html').hide().fadeIn();
    $(this).children().addClass('selected');
});
$('#contactarse').on('click', function(){
    $('nav ul a').find('.selected').each( function(){
        $(this).removeClass('selected');
    });
$('article').load('contacto.html').hide().fadeIn();
    $(this).children().addClass('selected');
});
});

Answer 1

您正在添加类，然后才能完成加载。尝试使用 load() 的回调并查看是否可以解决问题。像这样的事情:

$('#acerca_de').on('click', function(){
    var that = this;
    $('article').hide();
    $('nav ul a').find('.selected').each( function(){
        $(this).removeClass('selected');
    });
    $('article').load('acerca.html', function(){
       $(that).children().addClass('selected');
       $(this).fadeIn();
    });
});