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.