Código HTML :
<link rel="stylesheet" type="text/css" href="default.css" /> <link rel="stylesheet" type="text/css" href="component.css" /> <script src="C:\Users\fgtal\OneDrive\trabajo\damas\jquery-3.2.1.js"></script> <script src="modernizr.custom.js"></script> <script src="C:\Users\fgtal\OneDrive\trabajo\damas\damas.js"></script> <script src="C:\Users\fgtal\OneDrive\trabajo\damas\jquery-3.2.1.js"></script> </head> <body> <div class="container demo-3"> <header> <h1>Escoga un producto</h1> <div class="codrops-demos"> <a href="#" class="category-item" category="all">Todo</a> <a href="#" class="category-item" category="blusas">Blusas</a> <a href="#" class="category-item" category="buzos">Buzos</a> <a href="#" class="category-item" category="camperas">Camperas</a> <a href="#" class="category-item" category="camisones">Camisones</a> <a href="#" class="category-item" category="pantalones">Pantalones</a> <a href="#" class="category-item" category="pijamas">Pijamas</a> <a href="#" class="category-item" category="calzas">Calzas</a> <a href="#" class="category-item" category="sacos">Sacos</a> <a href="#" class="category-item" category="musculosas">Musculosas</a> </div> </header> <ul class="grid cs-style-3"> <li> <figure class="product-item" category="blusas"> <img src="C:\Users\fgtal\OneDrive\trabajo\damas\imagenes\25607.jpeg" alt="25607"> <figcaption> <h3>25607</h3> <span>Blusas dama con estampado</span> <a href="#">Ver más</a> </figcaption> </figure> </li> <li> <figure class="product-item" category="blusas"> <img src="C:\Users\fgtal\OneDrive\trabajo\damas\imagenes\26142.jpeg" alt="26142"> <figcaption> <h3>26142</h3> <span>Blusas dama con sublimado</span> <a href="#">Ver más</a> </figcaption> </figure> </li>
Código CSS :
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body, html { font-size: 100%; padding: 0; margin: 0;} body { box-sizing: border-box; font-family: 'Lato', Calibri, Arial, sans-serif; color: #b3b9bf; background: #f9f9f9; } a { color: #888; text-decoration: none; } a:hover, a:active { color: #333; } /* Header Style */ .container > header { width: 98%; margin: 0 auto; padding: 2em; text-align: center; background: rgba(0,0,0,0.01); } .container > header h1 { font-size: 2.625em; line-height: 1.3; margin: 0; font-weight: 300; } /* Demo Buttons Style */ .codrops-demos { padding-top: 1em; font-size: 0.9em; width: 15%; } .codrops-demos .category-item, .codrops-demos .category-item:hover { margin: 0.5em; padding: 0.7em 1.1em; font-weight: 700; display: flex; flex-direction: column; text-align: center; margin: 15px 0px; flex-wrap: wrap; background: #f9f9f9; } .codrops-demos .category-item { border: 3px solid #b3b9bf; color: #b3b9bf; } .codrops-demos .category-item:hover { border: 3px solid #2c3f52; color: #2c3f52; } .codrops-demos .ct_item-active{ background: #b3b9bf; color: black; }
Código Javascript :
$(document).ready(function(){ // AGREGANDO CLASE ACTIVE AL PRIMER ENLACE ==================== $('.codrops-demos .category_item[category="all"]').addClass('ct_item-active'); // FILTRANDO PRODUCTOS ============================================ $('.category_item').click(function(){ var catProduct = $(this).attr('category'); console.log(catProduct); // AGREGANDO CLASE ACTIVE AL ENLACE SELECCIONADO $('.category_item').removeClass('ct_item-active'); $(this).addClass('ct_item-active'); // OCULTANDO PRODUCTOS ========================= $('.product-item').css('transform', 'scale(0)'); function hideProduct(){ $('product-item').hide(); } setTimeout(hideProduct,400); // MOSTRANDO PRODUCTOS ========================= function showProduct(){ $('.product-item[category="'+catProduct+'"]').show(); $('.product-item[category="'+catProduct+'"]').css('transform', 'scale(1)'); } setTimeout(showProduct,400); }); // MOSTRANDO TODOS LOS PRODUCTOS ======================= $('.category_item[category="all"]').click(function(){ function showAll(){ $('.product-item').show(); $('.product-item').css('transform', 'scale(1)'); } setTimeout(showAll,400); }); });