web contenido estático

[mbm150]

Hola, yo creo que la mejor opción seria usar AngularJS, que es muy sencillo y ademas tendrás todas las URLs. Aqui esta la web: https://angularjs.org/.

De todas formas, para hacerlo de la forma que te dijo el compañero, te falta poner el script con el codigo jQuery, deberias incluirlo en el head, despues de la etiqueta </style>.

Código HTML:

<script src="js/jquery-1.7.1.min.js"></script>
<script>
var tabInicial = 1;
$(document).on("ready", main);
 
function main(){
    $("#menu a").on("click", abrirTab);
    $(".contenido").eq(tabInicial-1).fadeIn();
    $("#menu a").eq(tabInicial-1).addClass("tabActual");
}
 
function abrirTab(){
    $(".contenido").hide();
    $("#menu a").removeClass("tabActual");
    $(".contenido").eq($(this).index()).fadeIn();
    $(this).addClass("tabActual");
    return false;
}
</script>
 

Lo que te propone es que pongas todas las paginas que vayas a hacer (Todas las del menú) en la misma página, dentro de un div con class content cada una y al hacer click vas ocultando uno y mostrando otro. Por lo tanto, tendrias que crear un <div class="content"></div> y poner dentro lo que sea con cada una de las secciones de tu web dentro del propio index.

Código HTML:

<!--Donde tienes esto-->
<div id="content">
Contenido
</div>
<!--Cambiarlo por esto-->
<div class="content">
Contenido enlace 1 de menu
</div>
<div class="content">
Contenido enlace 2 de menu
</div>
etc.
 

Y claro, tendrías que cambiar en el CSS #content por .content. Pero esto tiene una pega, y es que la URL no cambia.

Yo creo que la mejor opción es usar AngularJS, pero tu decides. En la web tienes ejemplos: https://docs.angularjs.org/tutorial/step_07.