Después de muchos cambios en la función, funciona a medias, os lo explico.
Esta función de jquery puesta en el index.php lo que hace es cargar en la etiqueta "section" los enlaces, aparte dependiendo del apartado cambia el fondo y cambia el estilo de una caja, según entre en un apartado u otro.
Pues bien, esta función, funciona perfectamente con los enlaces del menú que están en la etiqueta "nav", le doy a cualquier enlace y carga la sección correspondiente con dichos estilos, el problema es que las páginas que carga dentro de las etiquetas "section" también tienen enlaces, que se han de abrir en la misma sección, pues esto ultimo no funciona, carga la página al completo cargándose el index y todo.
He revisado los enlaces, el código, la función parece funcionar bien, pero no lo hace:
En el Head:
Código HTML:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function()
{
$(document).ready(function()
{
$("a").click(function(event)
{
event.preventDefault(); //Se cancela la redirección
var classenlace = "." + $(this,"a").attr("class");
$.ajax(
{
url: $(this).prop("href")
}
).done(function(data)
{
var nombre = $(classenlace).data('nombre');
var me = $(classenlace).data('value');
me = "#" +nombre + me;
$("#section").html(data);
if (nombre == "contenido")
{
$("#section").css(
{
"background": "none",
"background-color": "#FFFFFF",
});
/*$(me).css(
{
"background-color": "#5677FC",
"border-style": "inset",
"color": "#FFFFFF"
});*/
}
if (nombre == "menucv")
{
$("#section").css(
{
"background": "none",
"background-color": "#FFFFFF",
});
$(me).css(
{
"background-color": "#5677FC",
"border-style": "inset",
"color": "#FFFFFF"
});
}
if (nombre == "amstrad")
{
$("#section").css(
{
"background": "none",
"background-color": "#010080",
});
$(me).css(
{
"background-color": "#5677FC",
"border-style": "inset",
"color": "#FFFFFF"
});
}
if (nombre == "autor")
{
$("#section").css(
{
"background": "none",
"background-color": "#FFFFFF",
});
$(me).css(
{
"background-color": "#5677FC",
"border-style": "inset",
"color": "#FFFFFF"
});
}
if (nombre == "peliculas")
{
$("#section").css(
{
"background-image": "url('../imagenes/sepia.jpg')",
"background-repeat": "repeat",
});
$(me).css(
{
"background-color": "#5677FC",
"border-style": "inset",
"color": "#FFFFFF"
});
}
if (nombre == "maquinitas")
{
$("#section").css(
{
"background": "none",
"background-color": "#FFFFFF",
});
$(me).css(
{
/*"background-color": "#5677FC",
"border-style": "inset",
"color": "#FFFFFF" */
});
}
if (nombre == "playmobil")
{
$("#section").css(
{
"background-image": "url('../imagenes/playmobil/fondo-play.jpg')",
"background-repeat": "repeat",
});
$(me).css(
{
"background-color": "#5677FC",
"border-style": "inset",
"color": "#FFFFFF"
});
}
if (nombre == "album")
{
$("#section").css(
{
"background-image": "url('../imagenes/cromos_fondo.png')",
"background-repeat": "repeat",
});
$(me).css(
{
"background-color": "#5677FC",
"border-style": "inset",
"color": "#FFFFFF"
});
}
});
});
});
},
false);
</script> Formato de los enlaces:
En el menú:
Código HTML:
<a href="http://www.forosdelweb.com/f179/paginas/cv.php?valor=1" class="enlace-cv" data-nombre="menucv" data-value="1">cv</a>
Dentro de la página que se carga en el "section":
Código HTML:
<div id="menucv2"><a href="http://www.forosdelweb.com/f179/paginas/cv.php?valor=2" class="2enlace-cv2" data-nombre="menucv" data-value="2">Estudios</a></div>
Como podéis apreciar los 2 enlaces tienen el mismo formato, pero solo funcionan los enlaces que están por fuera del section, los que están dentro no funcionan bien, creo que es porque cambia algo del código de la página intento analizarlo con la herramienta de Chrome para desarrolladores, el debug de javascript que lleva incorporado el Google Chrome pero no consigo ver donde esta el fallo. A ver si me podéis echar una mano.
bichomen