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> <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/">« Code Explanation</a> | <a href="jquery_ajax_tabs.zip">Download Source</a> <p> </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> HTML: