jquery function problem
jquery function problem
I have a problem with jquery. What I would like to make is that tabs will change a class when somebody clicks on a tab. 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>