<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).on('click', '.menu', function(e){ //Pego o click no menu através da class.
e.preventDefault();//paro para ele não fazer o padrão que é add o # na url
var link = $(this).attr('data-link'); // coloco o link que encontra-se no attr data-link
$( "#conteudo" ).load(link, function( response, status, xhr ) {// dou load e espero a resposta
if ( status == "error" ) { // se der erro lanço um texto no html de conteudo.
$("#conteudo").html('Ocorreu um erro em sua requisição ou a página não foi encontrada!');
}
});
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hildebrando Matias</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body>
<div id="borda_conteudo">
<div id="principal">
<div id="banner">
</div>
<div id="navegacao">
<div id="menu">
<a href="#" data-link="index.html" class="menu">HOME</a>
<img src="imagens/separador.gif" alt="separador" />
<a href="#" data-link="visao.html" class="menu">VISÃO</a>
<img src="imagens/separador.gif" alt="separador" />
<a href="#" data-link="casamento.html" class="menu">CASAMENTO</a>
<img src="imagens/separador.gif" alt="separador" />
<a href="#" data-link="ensaio.html" class="menu">ENSAIO DE NOIVAS</a>
<img src="imagens/separador.gif" alt="separador" />
<a href="#" data-link="infantil.html" class="menu">INFANTIL</a>
<img src="imagens/separador.gif" alt="separador" />
<a href="#" data-link="gestante.html" class="menu">GESTANTE</a>
<img src="imagens/separador.gif" alt="separador" />
<a href="#" data-link="contato.html" class="menu">CONTATO</a>
</div>