Cargar otro html completo

[AlexeiJie]

Saludos, llevo ya varios dias atascado en un problemita con mi pagina web, no encuentro lo que busco y todo lo que pruebo no funciona como debiera... el problema es el siguiente: estoy haciendo una web, basicamente en html, css y un poco de jquery y php, tengo un menu desplegable, esta compuesto de un indice y subindices, digamos:

.- Opcion 1
Opcion 1.1
Opcion 1.2
Opcion 1.3
.- Opcion 2
Opcion 2.1
.- Opcion 3
.- Opcion 4
Opcion 4.1
Opcion 4.2

Opcion 1 y sus subindices (1.1,1.2 y 1.3) llevan al mismo html, y asi con la Opcion 2 y Opcion 4, los indices comparten el mismo html con sus subindices, la diferencia esta en un div ("content") que se visualiza o se oculta dependiendo de la opcion que se elija.

Sencillamente el problema es que no se como conseguir con jquery q estando en cualquier pagina y presionando una opcion ke pertenezca a otra html, cargue la pagina completa y su correspondiente div "content", aqui va el codigo que estoy utilizando:

Código:

$('.nav-desplegable li a').click(function(e) {
		e.preventDefault();
		var href = $(this).attr('href');
		var nodo = $(this).attr('name');
		$(window).load(href, function() {
			alert('DESPUES!'); // aqui vendria cargar el contenido del div                                          
		});
});

Se me olvido comentar, que en vez de $(window).load, tambien he probado con $(document).load, no me carga ninguna de las dos maneras, y que la variable nodo guarda el nombre del div "content" que quiero visualizar.
Un saludo y gracias!

[NUCKLEAR]

Pero en ningun momento haces referencia al contenedor... div content ¬¬ com pensas que Jquery va a adivinar donde querés que se inyecte el HTML.

A menos que estes inventando algo que no estas explicando correctamente.

[AlexeiJie]

Soy muy novato en esto de jquery, lo que busco es que me recargue la pagina entera, no solo un div, por eso creia ke con $(window) o $(document) cargaria la otra pagina, es decir, no consigo hacer lo ke haria un simple <a> en html.

Luego haria referencia al content en el callback del load pq lo ke kiero es ke dependiendo de la subopcion, me muestre su respectivo "content".

A ver si me explico bien, imaginemos que tengo un index.html y el menu con las opciones y sus subopciones para mostrar los diferentes contenidos, cada opcion principal es un html distinto, y cada subopcion es un div "content" dentro del html, con un "id" diferente.

El "id" del content es la variable "nodo" del codigo, y el html es la variable "href".

Lo que quiero es que pulsando, por ejemplo la opcion 1.1, me cargue el html opcion1.html, oculte el content por defecto y visualice el contenido de la opcion 1.1 que en principio esta en "display=none", quedando mas o menos asi el codigo:

Código:

$('.nav-desplegable li a').click(function(e) {
		e.preventDefault();
		var href = $(this).attr('href');
		var nodo = $(this).attr('name');
		$(window).load(href, function() {
                        $('.content').hide();
			$(nodo).fadeIn(1500);                                          
		});
});

Lo que intento explicar, es ke estando en el index.html, pulse en el menu la opcion1.1, y se cargue la pagina opcion1.html y despues q la cargue, no muestre el content por defecto y muestre el div content con id="opcion1.1". Espero se me entienda, pq a lo mejor el codigo despista un poco por eso de que soy novato, no se muy bien si voy bien encaminado. Muchas gracias.

[NUCKLEAR]

Creo entender lo que quieres inventar. Tienes varias paginas padres con sus prespectivos hijos.

1
..1.1
..1.2
2
..2.1
3

Lo que pretendes hacer es que si alguien hace click en por ejemplo 1.2 cargue el HTML 1 y dentro del mismo el contenedor hijo 2. Es asi?

Si es asi como lo explico, no vas a poder hacerlo tan fácil, por que cuando hagas el load del padre cualquier rastro del hijo se va a perder, a menos que le envies el hijo en un parametro junto con la url para que de inmediato haga el load del contenedor.

Pregunta: Por que lo quieres hacer tan complicado.

[AlexeiJie]

No se si me he complicado demasiado la vida, pero no lo veia tan dificil cuando se me ocurrio la idea de hacerlo asi, la verdad es que me ha surgido como una necesidad debido a la forma en que tengo escrita la web.
Para que sirva de ejemplo, las paginas que quiero cargar de esta manera tienen la siguiente estructura:

Código:

<body>
<div class="container-inner">

    <div class="header">    	
    </div>
    
    <div class="nav"> 						
    </div>
    
	<div class="content" id="opcionpordefecto">
	</div>
    
    	<div class="content oculta" id="opcion1.1">           
	</div>
    
    	<div class="content oculta" id="opcion1.2">          
	</div>
    
    	<div class="content oculta" id="opcion1.3">
	</div>
        
        <div class="nav_interior">             
        </div>

        <div class="news">
        </div>

</div>
</body>

Y para navegar dentro de la pagina lo estoy haciendo con un <a> dentro de un "ul li", de la siguiente forma:

Código:

<a href="opcion1.html" name="#opcion1.3">Opcion 1.3</a>

De esta manera le paso por el href el html que quiero cargar y por el name, el content que querria q se mostrara, la clase "oculta" tiene el display="none", y el div "content" con id="opcionpordefecto" es el que quiero que se muestre en el caso solo de que se haga clic en la "opcion1" simplemente y que como se muestra por defecto, habria que ocultar en el caso de clicar en alguna subopcion (esto ultimo no es problema).

Espero que no sea demasiado complicado, de todas maneras estoy dispuesto a reestructurar los html, asi q acepto cualquier sugerencia q se ajuste a lo que necesito, lo importante es que pueda navegar entre las opciones y subopciones desde el div "nav" que tiene cada html.

Un saludo y gracias de nuevo :)