Estou criando um site, onde eu quero usar a div da pagina principal para alternar entre outras páginas. Por exemplo, tenho a 'index', 'conteúdo 1' e 'conteúdo 2'. Quero fazer com que quando eu clicar no link, troque o conteúdo da 'index' para 'conteúdo 1', sem ter que carregar outra página, mantendo a logo, menu e rodapé do site normais.
Quero saber como faço isso em código, por que já tentei alguns que vi a galera fazendo, de várias maneiras e não deu jeito, a div não ta mudando para a div da página que requisitei. Lembrando que uso o Wamp, a página tem o link da biblioteca no header e etc etc.
Editado: Então @AsuraKhan, eu li sua resposta e fui procurar entender mais sobre, porém ainda não me veio a clareza. Fiz um breve resumo do que eu estou tentando fazer aqui para você entender o que eu quero fazer. Exemplo:
- Index.html
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="conteudo2.html" id="a1">Conteudo 2</a>
</li>
<a href="conteudo3.html" id="a2">Conteudo 3</a>
<li>
</li>
</ul>
</div>
<div id="conteudo" class="content">
<h1>CONTEUDO 1</h1>
</body>
O conteúdo 2 (conteudo2.html) e 3 só muda a class, a id é a mesma.
E o script que estou tentando é esse:
<script type="text/javascript">
function Load(View){
$("#conteudo").load(View);
};
$(document).ready(function(e) {
$("#a1").click(function(e) {
Load('conteudo2.html');
});
$("#a2").click(function(e) {
Load('conteudo3.html');
});
});
</script>
Basicamente é isso, não estou conseguindo decifrar o erro.