Cargar dinámicamente el enlace en el atributo rel. - javascript, html, jquery-ui

Quiero cargar dinámicamente contenido usando jquery "s .load() función. Estoy almacenando los enlaces en el .rel Atributo de los enlaces. Lo tengo configurado de esta manera:

<script>
$(document).ready(function(){

$(".sidebar_link").click(function(){

var link = this.attr("rel");
event.preventDefault();
$("#content").empty();
$("#content").load(link "#content");

});
});
</script>

<div class="main_menu">
<a class="sidebar_link" href="#" rel="photos.htm">Photography</a>
<a class="sidebar_link" href="#" rel="furniture.htm">Furniture</a>
<a class="sidebar_link" href="#" rel="services.htm">Services</a>
</div>
</div>

No está funcionando. No parece estar tomando el enlace del atributo rel y no estoy seguro de por qué. ¿Alguna idea?

Respuestas

Prueba esto:

var link = $(this).attr("rel");

.attr no es una función de JavaScript nativa, es de jQuery, por lo que tiene que ajustar this con jQuery

Y esto:

$("#content").load(link);

Puede pasar una identificación para cargar fragmentos, sin embargo, la url y la identificación deben ser una cadena literal como tal $("#content").load("photos.htm #content") La página photos.htm debería tener un elemento en la página con contenido de identificación. Si solo quieres mostrar todo el contenido de la página, solo usa la url.

En tu controlador de click this es un elemento dom puro; debe llamar a la función jQuery antes de acceder al atributo atribuido

    $("#content").load($(this).attr("rel"));

$("#content").load(link "#content");

Es casi seguro que se trata de un error de sintaxis: verifique la consola de JavaScript. Creo que solo quieres .load(link);.