jQuery或PHP - 如果启用/禁用了另一个DIV，则显示/隐藏DIV或LI

Question

I have another question, not sure if this would be accomplished via PHP or jQuery, so I am posting it in both sections.

Basically what I want is this:

I have several DIVs on a page, including 4 divs entitled "Spring", "Summer", "Autumn" and "Winter".

I have another DIV that is called "Menu". In the menu, you can toggle each of the four season DIVs via jQuery. There are also several list items, for example "Ice Rinks" and "Ice Cream Stores". "Ice Rinks" would only be available when "Winter" is selected, and "Ice Cream Stores" when Summer is selected.

What I would like to do, preferably via jQuery, is HIDE "Ice Cream Stores" from the menu when the "Winter" DIV is enabled, or HIDE "Ice Rinks" when the "Summer" DIV is enabled.

Basically, I need a way to either selectivly, or dynamically (perhaps via a class on the list items) assign the menu items to one of the 4 Season DIVS, and then hide those items from the Menu when the associated Season DIV is toggled off.

Is this possible, and if so, does anyone have any code examples of how this would be accomplished?

Thanks Zach

Answer 1

It's possible. You can do like this

HTML:

<div id="spring" class="menubtn">Spring</div>
<div id="summer" class="menubtn">Summer</div>
<div id="autumn" class="menubtn">Autumn</div>
<div id="winter" class="menubtn">Winter</div>
<ul id="itemlist">
    <li class="winter">Ice Rinks</li>
    <li class="summer">Ice Cream Stores</li>
</ul>  

Javascript:

$(document).ready(function(){
    $('.menubtn').click(function(){
        // Handle Menu
        $('.menubtn').removeClass('active')
        $(this).addClass('active');

        // Handle item list. This is what you want to do 
        $('#itemlist li').hide();
        $('#itemlist li.' + $(this).attr('id')).show();
    });
});

You can see the demo here: http://jsfiddle.net/ynhat/Cgeus/3/