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

Question

我看到了很多关于这个的帖子，但我正在寻找更具体的东西。

当我应用此代码 @ localhost 工作 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

You're adding class before it can finish loading. Try to use load()'s callback and see if it fixes the problem. Something like this:

$('#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();
    });
});

Answer 2

first, on every # click you have to Hide the Div as the First Statement and then Clear the Class styles

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