JQuery или PHP - Показать / Скрыть DIV или LI, если другой DIV включен / отключен - PullRequest
Новая
       0

JQuery или PHP - Показать / Скрыть DIV или LI, если другой DIV включен / отключен

0 голосов
/ 25 апреля 2011

У меня есть другой вопрос, я не уверен, что это будет сделано через PHP или jQuery, поэтому я публикую его в обоих разделах.

В основном я хочу вот что:

У меня естьнесколько DIV на странице, в том числе 4 раздела под названием «Весна», «Лето», «Осень» и «Зима».

У меня есть еще один DIV, который называется «Меню».В меню вы можете переключать каждый из четырех сезонных DIV с помощью jQuery.Есть также несколько пунктов списка, например, «Ледовые катки» и «Магазины мороженого».«Ледяные катки» будут доступны только при выборе «Зима» и «Магазины мороженого» при выборе «Лето».

Что бы я хотел сделать, желательно через jQuery, это HIDE «Магазины мороженого»из меню, когда включен «Зимний» DIV, или скрыть «Ледовые катки», когда включен «Летний» DIV.

В принципе, мне нужен способ либо выборочно, либо динамически (возможно, через классв элементах списка) назначьте элементы меню одному из 4 Season DIVS, а затем скройте эти элементы из меню при выключении соответствующего Season DIV.

Возможно ли это, и если да, есть ли у кого-нибудь примеры кода того, как это можно сделать?

Спасибо, Зак

1 Ответ

2 голосов
/ 25 апреля 2011

Это возможно. Вы можете сделать это

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();
    });
});

Вы можете увидеть демо здесь: http://jsfiddle.net/ynhat/Cgeus/3/

...