Hola estoy haciendo este ejemplo de filtrar producto por categoría pero estoy teniendo un problema cuando selecciona una opción del menu izquierdo y el botón no queda activo.
$(document).ready(function(){
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
//$('.filter').removeClass('hidden');
$('.filter').show('1000');
}
else
{
//$('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');
}
});
});
.archive-producto .btn-primary {
background: #d1c286;
color: #fff;
border: initial;
border-radius: initial;
border-color: #d8cb98;
}
.archive-producto .btn-primary:hover,.archive-producto .btn-primary:focus,.archive-producto .btn-primary:active {
background: red !important;
border-color: initial !important;
}
.archive-producto .btn-primary.btn-outline {
background: #3d464a;
color: #fff;
border: initial;
padding: 10px 20px !important;
}
.archive-producto ul .btn{
display: block;
text-align: left;
}
.archive-producto .port-image{
width: 100%;
}
.archive-producto .col-md-4{
margin-bottom:20px;
}
.product .product-grid {
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
position: relative;
height: 350px;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.product .product-grid .sale {
position: absolute;
top: 16px;
left: 0;
padding: 5px 8px;
z-index: 100;
background: #c70707;
color: #fffbfa;
font-weight: bold;
display: inline;
text-align: left;
}
.product .product-grid .inner {
display: table;
height: 350px;
width: 100%;
opacity: 0;
background: rgba(0, 0, 0, 0.3);
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.product .product-grid .inner p .icon {
padding: 10px;
color: #fff;
background: #d1c286;
}
.product .product-grid .inner p .icon:hover, .product .product-grid .inner p .icon:focus {
color: #d1c286;
background: #fff;
font-weight: bold;
}
.product .desc h3 {
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 5px;
font-weight: bold;
line-height: 24px;
position: absolute;
bottom: 40px;
left: 0;
width: 100%;
}
.product .desc h3 a {
color: #000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div class="archive-producto">
<div class="col-lg-2">
<div class="row animate-box">
<ul class="categoria">
<li class="btn btn-primary filter-button" data-filter="all">Todos</li>
<li class="btn btn-primary filter-button" data-filter="mesas">Mesas</li>
<li class="btn btn-primary filter-button" data-filter="syb">Sillas y bancos</li>
<li class="btn btn-primary filter-button" data-filter="escritorios">Escritorio</li>
<li class="btn btn-primary filter-button" data-filter="ratonas">Mesa ratonas</li>
<li class="btn btn-primary filter-button" data-filter="accesorios">Accesorios</li>
</ul>
</div>
</div>
<div class="col-lg-10">
<div class="row animate-box">
<div class="col-md-4 filter mesas">
<div class="product">
<div class="product-grid" style="background-image:url(http://www.templates4all.com/wp-content/uploads/2011/09/Engon-Joomla-Corporate-Portfolio-Template.jpg);">
<div class="inner">
<p>
<a href="single.html" class="icon"><i class="icon-shopping-cart"></i></a>
<a href="single.html" class="icon"><i class="icon-eye"></i></a>
</p>
</div>
</div>
<div class="desc">
<h3><a href="single.html">Hauteville Concrete Rocking Chair</a></h3>
</div>
</div>
</div>
<div class="col-md-4 filter syb mesas">
<div class="product">
<div class="product-grid" style="background-image:url(http://www.templates4all.com/wp-content/uploads/2011/09/Engon-Joomla-Corporate-Portfolio-Template.jpg);">
<div class="inner">
<p>
<a href="single.html" class="icon"><i class="icon-shopping-cart"></i></a>
<a href="single.html" class="icon"><i class="icon-eye"></i></a>
</p>
</div>
</div>
<div class="desc">
<h3><a href="single.html">Hauteville Concrete Rocking Chair</a></h3>
</div>
</div>
</div>
<div class="col-md-4 filter escritorios">
<div class="product">
<div class="product-grid" style="background-image:url(http://www.templates4all.com/wp-content/uploads/2011/09/Engon-Joomla-Corporate-Portfolio-Template.jpg);">
<div class="inner">
<p>
<a href="single.html" class="icon"><i class="icon-shopping-cart"></i></a>
<a href="single.html" class="icon"><i class="icon-eye"></i></a>
</p>
</div>
</div>
<div class="desc">
<h3><a href="single.html">Hauteville Concrete Rocking Chair</a></h3>
</div>
</div>
</div>
<div class="col-md-4 filter syb mesas">
<div class="product">
<div class="product-grid" style="background-image:url(http://www.templates4all.com/wp-content/uploads/2011/09/Engon-Joomla-Corporate-Portfolio-Template.jpg);">
<div class="inner">
<p>
<a href="single.html" class="icon"><i class="icon-shopping-cart"></i></a>
<a href="single.html" class="icon"><i class="icon-eye"></i></a>
</p>
</div>
</div>
<div class="desc">
<h3><a href="single.html">Hauteville Concrete Rocking Chair</a></h3>
</div>
</div>
</div>
<div class="col-md-4 filter escritorios syb">
<div class="product">
<div class="product-grid" style="background-image:url(http://www.templates4all.com/wp-content/uploads/2011/09/Engon-Joomla-Corporate-Portfolio-Template.jpg);">
<div class="inner">
<p>
<a href="single.html" class="icon"><i class="icon-shopping-cart"></i></a>
<a href="single.html" class="icon"><i class="icon-eye"></i></a>
</p>
</div>
</div>
<div class="desc">
<h3><a href="single.html">Hauteville Concrete Rocking Chair</a></h3>
</div>
</div>
</div>
<div class="col-md-4 filter mesas">
<div class="product">
<div class="product-grid" style="background-image:url(http://www.templates4all.com/wp-content/uploads/2011/09/Engon-Joomla-Corporate-Portfolio-Template.jpg);">
<div class="inner">
<p>
<a href="single.html" class="icon"><i class="icon-shopping-cart"></i></a>
<a href="single.html" class="icon"><i class="icon-eye"></i></a>
</p>
</div>
</div>
<div class="desc">
<h3><a href="single.html">Hauteville Concrete Rocking Chair</a></h3>
</div>
</div>
</div>
<div class="col-md-4 filter accesorios">
<div class="product">
<div class="product-grid" style="background-image:url(http://www.templates4all.com/wp-content/uploads/2011/09/Engon-Joomla-Corporate-Portfolio-Template.jpg);">
<div class="inner">
<p>
<a href="single.html" class="icon"><i class="icon-shopping-cart"></i></a>
<a href="single.html" class="icon"><i class="icon-eye"></i></a>
</p>
</div>
</div>
<div class="desc">
<h3><a href="single.html">Hauteville Concrete Rocking Chair</a></h3>
</div>
</div>
</div>
<div class="col-md-4 filter ratonas">
<div class="product">
<div class="product-grid" style="background-image:url(http://www.templates4all.com/wp-content/uploads/2011/09/Engon-Joomla-Corporate-Portfolio-Template.jpg);">
<div class="inner">
<p>
<a href="single.html" class="icon"><i class="icon-shopping-cart"></i></a>
<a href="single.html" class="icon"><i class="icon-eye"></i></a>
</p>
</div>
</div>
<div class="desc">
<h3><a href="single.html">Hauteville Concrete Rocking Chair</a></h3>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>