I am trying to get some tabs working based on a tutorial elsewhere.
The difference is my tabs are within a nested div. My tabs are
displaying but it is displaying the content of all 3 at once.
Would appreciate some help fixing this as my Javascript knowledge is
very limited.
Here is the function I am using
Code:
<script src="js/jquery.js" type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();
$('div.tabs ul.tabNavigation a').click
(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show
();
$('div.tabs ul.tabNavigation
a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>
And here is my html
Code:
<body>
<div id="outer">
<div id="main">
<div id="leftColumn">
<div class="tabs">
<ul class="tabNavigation">
<li><a href="#first">Details</a></li>
<li><a href="#second">Photos</a></li>
<li><a href="#third">Map</a></li>
</ul>
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
Thanks
Paul
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
