[jQuery] Can't get onclick of tab to fire....

[jQuery] Can't get onclick of tab to fire....


Hey all.
I'm slowly but surely working through my tab issues.
My latest is that I can't get the onclick even to fire. I copied the
code, bt it won't work.
Also, is there a way to fire an event when a specific tab is clicked?
Here is the code I'm working with.
CODE BEGIN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<title>WDS Web Main Screen</title>
<link rel="stylesheet" type="text/css" media="all" href="/styles/
common.css">
<link rel="stylesheet" type="text/css" media="all" href="/styles/
jquery.tabs-ie.css">
<link rel="stylesheet" type="text/css" media="all" href="/styles/
jquery/ui.tabs.css">
<link rel="stylesheet" type="text/css" media="all" href="/styles/
jquery/ui.theme.css">
<script type="text/JavaScript" src="/js/jquery/jquery.js"></script>
<script type="text/JavaScript" src="/js/jquery/jquery-ui.js"></
script>
<script type="text/JavaScript" src="/js/jquery/
jquery.history_remote.pack.js"></script>
<script type="text/javascript">
/* JQuery BEGIN */
$(document).ready(function() {
$('#container').tabs({
fxFade: true,
fxSpeed: 'fast',
onClick: function() {
alert('onClick');
},
onHide: function() {
alert('onHide');
},
onShow: function() {
alert('onShow');
}
});
$('#container').tabs({
onclick: function(tab) {
alert("hello");
}
});
//$("#tabs").tabs();
});
/* JQuery END */
</script>
<style type="text/css">
.bodycontainerlocal
{
height: 725px;
overflow: auto;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">

First tab is active by default:


<pre><code>$('#example').tabs();</code></pre>
</div>
<div id="fragment-2"> </div>
<div id="fragment-3"> </div>
</div>
</body>
</html>
CODE END