JQuery troubles

I'm trying to have some links load within the same page with jQuery, but it does not seem to differentiate attributes from multiple elements (don't know how to explain it.. heres the code)

<a href="http://website1/">text</a>
<a href="http://website2/">text</a>
<a href="http://website3/">text</a>
<a href="http://website4/">text</a>
<a href="http://website5/">text</a>

HTML:

$("a").click( function () {
  var href = $("a").attr("href");
  $("#content").load(href);
  return false;
});

Code (markup):

When I try this it loads the href from the first <a> tag on the page, I want it to use the one that was clicked on

 

Got a link?

 

try changing:

var href = $("a").attr("href");

PHP:

to this:

var href = $(this).attr("href");

PHP:

 

Heh.. yeah I tried that the first time I messed around with it but stupidly I was putting quotes around "this" so I thought it didn't work so I just tried putting "a" instead

 

Are you sure that shouldn't be

$('#content').load(href + ' body');

Code (markup):