[SOLUCIONADO] jQuery, load() y menus

pabli · #1 (**permalink**) 01/04/2015, 07:59

Hola chicos,
os escribo a ver si me podéis ayudar.

Estoy haciendo una web y quiero dejar estática la parte superior y el menú y cargar páginas html para el contenido.
Lo he hecho de forma estática para que cargue siempre la misma y funciona bien. Lo que no se es como hacerlo para cargar cada página del menú.

Esto es lo que tengo hecho:

Código HTML:

<html>
<head>
	<script type="text/javascript">
	$(function()
	{
        $("#contenido").load("welcome.html");
	});
	</script>
</head>
<body>
	<div>
	<ul>
	   <li class='has-sub'><a href='#'><span>Home</span></a>
	      <ul>
	         <li><a href="ejemplo1.html">Opción 1</a></li>
	         <li><a href="ejemplo2.html">Opción 2</a></li>
	         <li><a href="ejemplo3.html">Opción 3</a></li>
	         <li><a href="ejemplo4.html">Opción 4</a></li>
	      </ul>
	   </li>
	</ul>
	</div>
 
	<div id="contenido">
	</div>
</body>
</html>

Estoy empezando con la programación en internet y no me aclaro mucho. Creo que se podría hacer de dos maneras:

-o metiendo el load(), que no se si se puede, dentro de cada item del menú (dentro de cada "<a ref")
-o guardando un valor en una variable en cada "<a ref" y donde se ejecuta el .load() un "select/option/ifs encadenados" para cargar el html correcto.

Se puede hacer alguna de las dos? Lo pregunto porque no se como sería la sintaxis dentro del ref.

Gracias y un saludo

diurno10 · #2 (**permalink**) 01/04/2015, 08:16

proba con esto

Código Javascript:

Ver original$(function(){
        $("#contenido").load("welcome.html");
        $('ul.submenu li a').click(function(){
        var _url = $(this).attr('href');
        $("#contenido").load(_url);
        return false;
    });
 
 
});

fijate que al ul donde estan los links le agregue una class="submenu" para poder selecionarlo

Código HTML:

Ver original<ul>
       <li class='has-sub'><a href='#'><span>Home</span></a>
          <ul class="submenu">
             <li><a href="ejemplo1.html">Opción 1</a></li>
             <li><a href="ejemplo2.html">Opción 2</a></li>
             <li><a href="ejemplo3.html">Opción 3</a></li>
             <li><a href="ejemplo4.html">Opción 4</a></li>
          </ul>
       </li>
    </ul>

pabli · #3 (**permalink**) 01/04/2015, 08:38

Hola diurno10,
ha funcionado perfectamente

Muchas gracias!!!