current tab selected with an image sprite
Hi-
I'm trying to create a tab style navigation with an image as the background. everything is working correctly except the current state of the selected content tab is showing the current state for the first tab. Below is the code I have for the tabs:
$(function () {
var tabContainers = $('div#starters, div#sandwiches');
tabContainers.hide().filter(':first').show();
$('ul#menu-nav li a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('ul#menu-nav li a').removeClass('menu-current');
$(this).addClass('menu-current');
return false;
}).filter(':first').click();
});
here is the markup for the nav:
<ul id="menu-nav">
<li class="starters"><a href="#starters" title="Appetizers">Appetizers, Soups and salds</a></li>
<li class="sandwiches"><a href="#sandwiches" title="Burgers, sandwiches and pizza">Burgers, Sandwiches and Pizza</a></li>
<li class="entrie"><a href="#entrie" title="Entries and wraps" >Entries, Wraps and Kids</a></li>
<li class="desserts-bev"><a href="#desserts-bev" title="Dessert and beverages">Desserts and beverages</a></li>
</ul>
The nav background is one large image positioned with the css for the specified class.
Thank you for any help