Cargar contenido en un div con jquery load

Cómo cargar contenido en un div con jquery load

El uso de los iframes ya no está muy de moda estos días por lo que dividir y cargar contenido usando iframes ya no es muy recomendable.

Lo de hoy es jquery así que en esta publicación voy a explicar cómo cargar contenido en un div con jquery.

La función de jquery a usar es load como el album de Metallica.

En este caso tengo un menú en estructura de ul y li que contiene ligas con diferentes destinos. Lo que quiero es que cada liga cargue un contenido html (puede ser contenido dinámico también) diferente por lo que en cada liga especifico la dirección a cargar con el atributo data-id. Pueden usar su propio atributo.

El siguiente es mi menú que como ven está anidado y las ligas tienen diferentes niveles pero eso no va a ser ningun problema para jquery. El id del menú va a ser utilizado para el selector de jquery.

Aquí recomiendo invalidar las ligas en el atributo href con javascript: href="javascript:;"

<div id="ddmenuprincipal" class="ddmenuprincipal">
        <div>
            <nav>
                <ul>                   
                   <li>
                        <a class="" href="/" >Productos</a>
                        <ul class="fallback">
                            <li><a href="javascript:;" data-id="folder1/archivo1.htm">Cristalia</a></li>
                            <li><a href="javascript:;" data-id="folder2/archivo2.aspx?var=algo">Ecar</a></li>                          
                        </ul>
                    </li>
                 </ul>
            </nav>
        </div>
</div>

A continuación el código que requiere tener una versión válida de jquery y recuerden siempre estar dentro del evento ready de jquery.

Este código indica cargar la ruta especificada en el atributo data-id en el elemento con id contenido cuando haya un click en las ligas que se encuentren en el elemento con id ddmenuprincipal. Enredado no?
Les dejo el alert para que vean la dirección del archivo que especificaron en el menú.

$(document).ready(function () {
    $('#ddmenuprincipal').on('click', 'a', function () {
        alert($(this).attr('data-id'));
        $("#contenido").load($(this).attr('data-id'));       
    });
});

Si tienen hoja de estilos definida dentro de los archivos a cargar, los estilos entrarán en conflicto así que definan antes donde van a tenerlos. Lo ideal es tenerlos en el archivo que hace la llamada.

Espero les sirva.