I have a problem with jquery. What I would like to make is that a tab will change a class when somebody clicks on it. Everything else works ok, excepting this. I spent couple of hours on this and it still doesn't work. It works only when I click on a tab 1st time, but than not anymore. I tried to include click function inside another function and also many other combinations and still doesn't work. I would be so glad if anybody can tell me where exactly I should include the last click function.

HTML Code:
<html>
	<head>
		<title>jQuery: AJAX Tabs</title>	
    <link rel="stylesheet" type="text/css" href="class.css" /> link 
		<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
		<script type="text/javascript"> 

		
			$(document).ready(function()
			{    	
				$("#tab1").click(function()
				{
					$.ajax(
		        {
	            url: "tab1.html", 
	            cache: false,
	            success: function(message) 
	            {			            	
                $("#tabcontent").remove();
                $(".container").append(message);			          				          
	            }
		        });	
        });
				
				$("#tab2").click(function()
				{
					$.ajax(
		        {
	            url: "tab2.html", 
	            cache: false,
	            success: function(message) 
	            {			            	
                $("#tabcontent").remove();
                $(".container").append(message);
                         
	            }
		        });	
        });
			
      $("#tab1").click(function()
				{
          $(".navcontainer").empty();
			    $(".navcontainer").append("<ul><li><a id='tab1' class='selected' href='#'>Tab 1</a></li><li><a id='tab2' class='unselected' href='#'>Tab 2</a></li></ul>");             
        });              

      $("#tab2").click(function()
				{ 
          $(".navcontainer").empty();
			    $(".navcontainer").append("<ul><li><a id='tab1' class='unselected' href='#'>Tab 1</a></li><li><a id='tab2' class='selected' href='#'>Tab 2</a></li></ul>");             
        }); 
      });
		</script>
		
	</head>
	<body>
		<a href="http://jetlogs.org/2008/03/17/jquery-ajax-tabs/">&laquo; Code Explanation</a> | <a href="jquery_ajax_tabs.zip">Download Source</a>
		<p>&nbsp;</p>		
		<div class="container">
			<div class="navcontainer">
				<ul>
					<li><a id="tab1" href="#">Tab 1</a></li>
					<li><a id="tab2" href="#">Tab 2</a></li>
				</ul>
			</div>
			<div id="tabcontent">
			Here is a simple demonstration of how AJAX Tabs work.
			</div>		
		</div>
	</body>
</html>