Question

I have 3 external pages (inicio.php, perfil.php and produtos.php). And I would like them to appear dynamically and respective in #contaMenuEsq as I click in the "li".

I would like to use jQuery because my intention is to use fadeIn and fadeOut effects when navigating between these 3 links.

index.php

<div id="contaMenuDir">
  <div id="contaMenuOpcoes">
    <ul>
      <li id='inicio'>Inicio</li>
      <li id='perfil'>Perfil</li>
      <li id='produtos'>Produtos</li>
    </ul>
  </div>
</div>
<div id="contaMenuEsq"></div>

Thank for your help in advance.

Answer 1

Have you checked out jQuery .load() and fadeIn?

$('#contaMenuDir').on('click','li',function(){
    var text = this.attr('id');
    $('#contaMenuEsq').load(text+'.php',function(){
        //run fade here
    });
});

I suggest you read about get() instead. It gives you more control over the actions after dynamically loading the content.