Я пытался найти решения по всем остальным вопросам, и люди предлагали jQuery / Javascript ответ для некоторых, но не могли заставить что-либо работать.
Вот сценарий.
это проекты. php:
<div class="row text-center">
<div class="col-md-4">
<button class="btn btn-default filter-button" data-filter="past">Past
Projects</button>
</div>
<div class="col-md-4">
<button class="btn btn-default filter-button" data-filter="present">Present
Projects</button>
</div>
<div class="col-md-4">
<button class="btn btn-default filter-button" data-filter="future">Future
Projects</button>
</div>
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter past">
<img src="http://fakeimg.pl/365x365/" class="img-fluid">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter past">
<img src="http://fakeimg.pl/365x365/" class="img-fluid">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter past">
<img src="http://fakeimg.pl/365x365/" class="img-fluid">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter past">
<img src="http://fakeimg.pl/365x365/" class="img-fluid">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter past">
<img src="http://fakeimg.pl/365x365/" class="img-fluid">
</div>
<!-- Present Projects -->
<!-- -->
<!-- Start -->
<div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter present">
<img src="http://fakeimg.pl/365x365/" class="img-fluid">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter present">
<img src="http://fakeimg.pl/365x365/" class="img-fluid">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter present">
<img src="http://fakeimg.pl/365x365/" class="img-fluid">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter present">
<img src="http://fakeimg.pl/365x365/" class="img-fluid">
</div>
<!-- Future Projects -->
<!-- -->
<!-- Start -->
<div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter future">
<img src="http://fakeimg.pl/365x365/" class="img-fluid">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter future">
<img src="http://fakeimg.pl/365x365/" class="img-fluid">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-6 filter future">
<img src="http://fakeimg.pl/365x365/" class="img-fluid">
</div>
Jquery
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
//$('.filter').removeClass('hidden');
$('.filter').show('1000');
}
else
{
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
Затем на другой странице, ссылающейся на страницу проектов, я хотел бы иметь возможность вернуться к ней фильтр данных либо прошлое / будущее / настоящее, как показано ниже. Я хочу, чтобы это открывало страницу проекта только с отображением галереи в прошлом. В настоящее время у меня есть кнопки, которые
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="projects.php">Projects</a></li>
<li class="breadcrumb-item"><a href="projects.php?past">Past</a></li>
<li class="breadcrumb-item active" aria-current="page">Bayard Place</li>
</ol>
</nav>