<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div >
<nav id="mi-menu">
<div>
<ul>
<li>
<a href="#" data-category="todos">Todos</a>
</li>
<li>
<a href="#" data-category="ordenadores">Ordenadores</a>
</li>
<li>
<a href="#" data-category="laptos">Laptos</a>
</li>
<li>
<a href="#" data-category="celulares">Celulares</a>
</li>
</ul>
</div>
</nav>
<div id="productos">
<ul>
<li class="ordenadores">
ordenador 1
</li>
<li class="laptos">
lapto 1
</li>
<li class="celulares">
celular 1
</li>
<li class="ordenadores">
ordenador 2
</li>
<li class="celulares">
celular 2
</li>
<li class="ordenadores">
ordenador 3
</li>
<li class="laptos">
lapto 2
</li>
<li class="laptos">
lapto 3
</li>
<li class="celulares">
celular 3
</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>
jQuery(document).ready(function($) { //selector de #mi-menu
$('#mi-menu').find('a').on('click', function(e){ e.preventDefault();
var productos = $('#productos').find('li');//listado productos
$(productos).hide();//ocultamos todos los "<li>" del listado "productos"
var tipo = $(this).data('category');//data-category
if(tipo == 'todos'){ //si se hace click en "todos"
$(productos).show();//mostramos todos los productos
}else{ //si no
$('#productos').find('li.'+tipo).show();//mostramos los que tienen la misma clase que el "data-category" que se ha hecho click ;)
}
});
});
</script>
</body>
</html>
Crear cuenta
