Switching Between Hidden Divs on Page with Same Class Affects All Divs

I have 2 div's on my page with individual id's. Within those div's I have an unordered list that shares the same class (.stats-nav):

<div id="product1">
<ul class="stats-nav">
    <li class="stat-cat1"><a href="">Ingredients</a></li>
    <li class="stat-cat2"><a href="">Nutrition Info</a></li>
    <li class="stat-cat3"><a href="">Feeding Instructions</a></li>
</ul>
</div><!--end product1-->

<div id="product2">
<ul class="stats-nav">
    <li class="stat-cat1"><a href="">Ingredients</a></li>
    <li class="stat-cat2"><a href="">Nutrition Info</a></li>
    <li class="stat-cat3"><a href="">Feeding Instructions</a></li>
</ul>
</div><!--end product2-->

Only 1 of the divs are show at a time; the other is hidden (show/hide). The same is true for the list items: only one is shown at a time. The default state is "Ingredients".

I'm using Jquery's live to bind it:

$("li.stat-cat1 a").live('click', function() {
$(".nutritional-info").show开发者_运维百科();
return false;
});

The problem I am having is if I'm looking at #product2 and click on say "Nutritional Info" and then click over to #product1, it will show #product1's correct info but it will start where I left off at "Nutritional Info" rather than the default state "Ingredients".

Is there a way for me to "clear" the last state of the div?

(If I load it in via ajax .load the content refreshes as intended but I no longer wish to use the ajax method).

Thanks!

I'm not sure i understand correctly, but it looks like you are applying your event to both 'li.stat-cat1'. It sounds like you need to isolate each. Or that you need to reference the individual link relative to the click. I don't see any class called 'nutritional-info', so i'm guessing its a child of the ul.

$("li.stat-cat1 a").live('click', function() {
    $(".nutritional-info").hide();//hide all
    $(this).closest('stats-nav').find(".nutritional-info").show();
});

EDIT: After further thought, you might just need to add a new class to your click event.

$("li.stat-cat1 a").live('click', function() {
    $(".nutritional-info").show();
    $(".nutritional-info").addClass('selected')
    return false;
});

Then you can find it later by:

$(".nutritional-info.selected")

I think your problem is that your selector $(".nutritional-info") is finding all the elements on the page regardless of whether their parent div is visible or not. To filter the action to only act on the visible product try something like:

$("li.stat-cat1 a").live('click', function() {
    $("div:visible .nutritional-info").show();
    return false;
});