Targetting div using an anchor jquery

I'm having a problem with targeting a div from href link.

I can do this using a div. For instance, I can use a code like this to target a div.

<div id="nav"> 
<a href="index1.html">home</a> 
<a href="index.php">why</a> 
<a href="search.php">a story</a> 
<a href="testpage.php">a picture</a> 
</div>

It targets this div, this is where it will appear after clicking a specific link:

<div id="content">
</div>

..and the jquery for this is

<script type="text/javascript">
$(function(){
$('#nav'a).click(function(e) { 
$('#content').hide().load( $(this).attr('href') , function(){
$('#content').show()
})
return false
})
})
</script>

However, I want to use this function without using the div and unfortunately I'm having trouble doing this when I try using the id "nav" on an anchor it is not working and it appears to load to another page but not to the div.

See below of the code result I wanted

<div> 
<a id="nav" href="index1.html">home</a> 
<a id="nav" href="index.php">why</a> 
<a id="nav" href="search.php">a story</a> 
<a id="nav" href="testpage.php">a picture</a> 
</div>

I suspect it has something to do with this line of code and I found out somewhere in google that the "a" in this function refers to a div though I'm not so sure

$('#nav a').click(function(e)

Thanks in Advance!

Solution

First, ID's should be unique, if you're appling to a group, use a Class instead. So change it to look like this:

<div> 
    <a class="navlink" href="index1.html">home</a> 
    <a class="navlink" href="index.php">why</a> 
    <a class="navlink" href="search.php">a story</a> 
    <a class="navlink" href="testpage.php">a picture</a> 
</div>

Then just bind to the class: a.navlink or .navlink would work:

$('.navlink').click(function(e) { 
    e.preventDefault();
    $('#content').hide();
    $('#content').load($(this).attr('href') , function(){
        $('#content').show();
    });
});