Tentarei ser o mais claro possível para não confundir, pois a questão ai está na lógica, não entrarei em detalhes de segurança ou uso de charset, mas essas questões devem ser visadas, vamos lá...
Html: marcação (front-end);
Javascript & Jquery: ação, eventos e outros (usando como front-end);
PHP: gestão dos dados, conexões com banco de dados, entre outros (back-end).
apenas um resumo básico para entender como vamos montar esse quebra cabeça...
Passo 1
Inicialmente você terá que cria o arquivo html com a estrutura básica e com os elementos de uso para funcionamento do script js e jquery, exemplo (index.html):
INICIO - ESTRUTURA HTML BÁSICA
INICIO - BODY
<div id="error">
</div>
<div id="mostra-pagina">
</div>
<ul>
<li><a class="main-link" data-link="pagina_1.php" href="#">Página 1</a></li>
<li><a class="main-link" data-link="pagina_2.php" href="#">Página 2</a></li>
<li><a class="main-link" data-link="pagina_3.php" href="#">Página 3 não existe</a></li>
</ul>
<!-- javascript
================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
console.log('teste');
$(function() {
$('.main-link').on('click', function(e) {
e.preventDefault();
var lnk = $(this).attr('data-link'),
opcao2 = 'Meu teste';
console.log(lnk);
$.ajax({
type:'post',
data: {link : lnk, 'opcao2': opcao2},
url: 'indice.php',
dataType: 'html',
error: function(xhr) {
$("div#error").html('Erro ao passar variavel: ' + xhr.responseText);
},
success: function(retornoBackend) {
$("div#mostra-pagina").html(retornoBackend);
}
});
})
});
</script>
FIM - BODY
FIM - ESTRUTURA HTML BÁSICA
OBS: Lembre-se de colocar a estrutura do html, pois o Stackoverflow não permite que eu as coloque aqui.
Passo 2
Criaremos o indice das páginas, exemplo (indice.php):
switch ($_POST['link']) {
case 'pagina_1.php':
include($_POST['link']);
break;
case 'pagina_2.php':
include($_POST['link']);
break;
default:
print_r('não existe');
break;}
OBS: Lembre-se de colocar a estrutura do php.
Passo 3
Páginas de inclusão, (pagina_1.php ou pagina_2.php):
print_r ('link: '. $_POST['link'] .' | opcao2: '. $_POST['opcao2']);
OBS: Lembre-se de colocar a estrutura do php.
ENTENDENDO A LÓGICA:
1 - entra no sistema, arquivo index.html:
1.0 - carrega evento CLICK;
1.0.0 - comunica back-end, função Ajax xhr.
2 - aciona click:
2.0 - preventDefault(), cancela o evento se for cancelável, sem parar a propagação do mesmo;
2.0 - cria duas variável:
2.0.0 - lnk recupera atributo data-link com valor da página a ser carregada;
2.0.1 - opcao2, outro valor qualquer, apenas para entender a proposta;
2.1 - envia ao back-end (indice.php).
3 - indice.php recebe o array via post:
3.0 - recebo e passo para uma condição switch para checar qual página foi solicitada;
3.0.0 - de acordo com o valor, a condição inclui (include) ou retorna mensagem ao front-end;
4 - função Ajax de sucesso (success) recebe o valor em retornoBackend e imprime no elemento div com id mostra-pagina.
OBS:
Existe diversas maneiras de fazer uma requisição como essa, tente entender o conceito e como funciona a comunicação XHR;
Não sei seu objetivo além de incluir as páginas... para construir um site ou sistema existe uma lógica infinita;
É isso, espero ter ajudado, boa pratica e estudos.