change html of div

I am trying to change the content of divs, but it seems like after i click the first time, it won’t let me change anything else after that. so i will click a link, it will go bold, but then when i try to click another, nothing happens. here is my code:

[CODE]$(‘#allNav’).click(function() {
$(“#navPane”).html(“<li><div id=’allNav’><strong><a href=’#’>All</a></strong></div></li><li><div id=’photoNav’><a href=’#’>Photos</a></div></li><li><div id=’docsNav’><a href=’#’>Documents</a></div></li></ul> “);
});
$(‘#photoNav’).click(function() {
$(“#allTitle”).html(“Photos”);
$(“#navPane”).html(“<li><div id=’allNav’><a href=’#’>All</a></div></li><li><div id=’photoNav’><strong><a href=’#’>Photos</a></strong></div></li><li><div id=’docsNav’><a href=’#’>Documents</a></div></li></ul> “);
});

$(‘#docsNav’).click(function() {
$(“#allTitle”).html(“Documents”);
$(“#navPane”).html(“<li><div id=’allNav’><a href=’#’>All</a></div></li><li><div id=’photoNav’><a href=’#’>Photos</a></div></li><li><div id=’docsNav’><strong><a href=’#’>Documents</a></strong></div></li></ul> “);
});[/CODE]

[CODE]<div id=”navPane”>
<li><div id=”allNav”><strong><a href=”#”>~All</a></strong></div></li>
<li><div id=”photoNav”><a href=”#”>Photos</a></div></li>
<li><div id=”docsNav”><a href=”#”>Documents</a></div></li>
</div>[/CODE]

Also in #JavaScript _↴