1

Eu tenho uma lista com 3 elementos e 3 divs.

<ul>
    <li>Todos</li>
    <li>elemento 1</li>
    <li>elemento 2</li>
    <li>elemento 3</li>
</ul>

<div id="1">elemento 1</div>
<div id="2">elemento 2</div>
<div id="3">elemento 3</div>

O que e estou tentando fazer é clicar em um elemento da lista e mostrar a div correspondente e esconder as outras divs. Alguém pode me mostrar algumas maneiras de como fazer isso com jquery?

0

1 Resposta 1

3

Veja se isso serve pra você:

$(function() {
    $('ul#items li').click(function(){
        var item = $('.elem[data-item="' + $(this).attr('data-item') + '"]');
        if($(this).attr('data-item') == 'all') {
            $('div.elem').show();
            return;
        }
        item.show();                                     
        $('div.elem[data-item!="'+item.attr('data-item')+'"]').hide();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="items">
    <li data-item="1">elemento 1</li>
    <li data-item="2">elemento 2</li>
    <li data-item="3">elemento 3</li>
    <li data-item="all">Todos</li>
</ul>

<div data-item="1" class="elem">elemento 1</div>
<div data-item="2" class="elem">elemento 2</div>
<div data-item="3" class="elem">elemento 3</div>

Os elementos são associados pelo atributo data-item, ou seja, a li onde o valor do atributo data-item é 3 vai mostrar a div com data-item 3 e esconder as outras. O elemento com data-item igual a all vai mostrar todas as divs novamente.

Caso queira que as outras fiquem escondidas por padrão é só adicionar um display: none no css.

5
  • Obrigado André! Serviu sim. Eu modifiquei o código como faria pra mostrar todos os elementos?
    – user20360
    12/01/2015 às 14:27
  • 1
    @ewertonorg você diz mostrar todas as divs novamente? Tipo resetar o filtro? 12/01/2015 às 14:30
  • Exato, quando clico na opção 'todos' e mostra todas as divs que tinha antes.
    – user20360
    12/01/2015 às 14:33
  • @ewertonorg editei minha resposta pra adicionar essa funcionalidade. Dá um olhada aí. 12/01/2015 às 14:43
  • vlw André, +1 pra você! :D
    – user20360
    12/01/2015 às 14:45