I'm doing a job for college where the teacher asked us to use Links without refresh it, he taught us how to do but it is not working in my case.
When I change the pages in the menu, the content should be loaded by modifying only the div with id = conteudo
(with the header remaining along with the menu and footer). But this is not happening ... The div updates but the header, menu and footer disappear.
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu a").click(function(e){
e.preventDefault();
var href =$(this).attr('href');
$(".conteudo")load(href + ".conteudo");
});
});
</script>
HTML
<body>
<div class="base"><!-- inicio div base -->
<div><img id="logo" src="imagens/img/logo.jpg">
</div>
<div class="menu"><!-- inicio menu -->
<ul id="menu">
<li><a href="inicio.html">Pagina Inicial</a></li>
<li><a>O Clube +</a>
<ul class="submenu">
<li><a href="historia.html">História</a></li>
<li><a href="diretoria.html">Diretoria</a></li>
</ul></li>
<li><a href="fotos.html">Fotos</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Eventos</a></li>
</ul>
</div> <!-- Fim da div menu -->
<div id="conteudo">
<figure>
<span class="trs next"></span>
<span class="trs prev"></span>
<div id="slider">
<a href="#" class="trs"><img src="imagens/slideshow/panoramica.jpg" alt="Vista Panorâmica"></a>
<a href="#" class="trs"><img src="imagens/slideshow/piscina.jpg" alt="Piscina"></a>
<a href="#" class="trs"><img src="imagens/slideshow/clube.jpg" alt="Clube"></a>
</div>
<figcaption></figcaption>
</figure>
<div class="reservas">
<h2>Titulos temporário e Reservas</h2>
<p>Interessados a títulos temporários entrar em contato com a diretoria, ou pelo fone (49) 99126-8111. </p>
<p>Reservas do clube para casamentos e festas particulares entrar em contado com Jackson Berti (Kinho) pelo fone (49) 99135-5523.</p>
</div>
<div class="informacoes">
<div id="info">
<div class="end">
<h2>Iporã Piscina Clube</h2>
<p>Rua Anildo Heissler, s/n<br>
Iporã do Oeste - Santa Catarina<br>
cep: 89899-000 / fone: (49) 3634-1155</p>
</div>
<div class="face">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fiporapiscinaclube%2F&tabs=timeline&width=300&height=120&small_header=false&adapt_container_width=false&hide_cover=false&show_facepile=false&appId"width="300" height="130" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
<div class="avaliacao">
<FORM ACTION="mailto:[email protected]" METHOD="POST" ENCTYPE="text/plain" NAME="cadastro">
<input type=hidden name="destino" value="[email protected]">
<h3>Avaliação do Clube</h3>
Nome Completo:<INPUT TYPE="TEXT" NAME="nome" SIZE="35"><br>
Seu e-mail:<INPUT TYPE="TEXT" NAME="email" SIZE="35"><br>
Reclamações, Melhorias e Elogios:
<TEXTAREA NAME="observacoes" ROWS="5" COLS="37"></TEXTAREA><br> <INPUT TYPE="SUBMIT" VALUE="Enviar os dados" onClick="return validar();">
<INPUT TYPE="RESET" VALUE="Limpar os dados">
</form>
</div>
</div>
</div>
<!-- inicio rodape -->
<div class="rodape">
<hr>
<p class="direitos">© Iporã Piscina Clube 2016 | Todos os Direitos Reservados.</p>
</div>
</div>
</div><!-- fim da div base-->
</body>