Sprite Nav Active State Issues

[drewpark88]

Hey Everyone,

First off thank you for taking the time to help out. Here's my issue, I am using javascript to use a fade effect on my css sprite menu. I am also using the Jquery Tab function to bring up my content. So basically this is how it works.

1. You roll over a ("tab") nav button and it fades to the hover state.

2. When you click a button it will bring up the hidden content within the page without refreshing the page.

So it all works but I have one problem, I am having trouble trying to figuring out how to create an active state (which will be the same as the hover state).

How can I do this? Any thoughts?

Here is my Javascript for the fading navbar:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(function () {
        if ($.browser.msie && $.browser.version < 7) return;
        
        $('#navigation li')
            .removeClass('highlight')
            .find('a')
            .append('<span class="hover" />').each(function () {
                    var $span = $('> span.hover', this).css('opacity', 0);
                    $(this).hover(function () {
                        // on hover
                        $span.stop().fadeTo(500, 1);
                    }, function () {
                        // off hover
                        $span.stop().fadeTo(500, 0);

                    });
                });

                
    });
</script>

Here is my Javascript for the jquery tab function:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

	//Default Action
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
	
	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active content
		return false;
	});

});
</script>

Any help will be greatly appreciated : )