Я хочу удалить кнопку «все» и установить фильтр «аудиокниги» по умолчанию, когда пользователь посещает веб-сайт.У меня там будет только 2 кнопки Audio Book и Text Images.Я использую Bootstrap 4.
Это то же самое, что я ищу.Но когда я обновляю сайт, это как мигание, тогда через 1-2 секунды исчезает другая категория. Удалите кнопку «все» в фильтре портфолио и автоматически отобразите конкретную кнопку фильтра в JavaScript
Я хочу что-то подобное, когда пользователь просматривает веб-сайт, другая категория которого уже скрыта.
Я надеюсь, что кто-то может помочь мне.Спасибо!
<div class="editorial">
<div class="container">
<div class="portfolio-menu mt-2 mb-4">
<ul>
<li class="btn btn-outline-dark active" data-filter="*">All</li>
<li class="btn btn-outline-dark" data-filter=".TI">Text & Images</li>
<li class="btn btn-outline-dark" data-filter=".AB">Audiobook</li>
</ul>
</div>
<div class="portfolio-item row">
<div class="item TI col-5">
<a href="././assets/images/FS_editorial_top1.jpg" class="fancylight popup-btn" data-fancybox-group="light">
<img class="img-fluid" src="././assets/images/FS_editorial_top1.jpg" alt="">
</a>
</div>
<div class="item TI col-5">
<a href="././assets/images/FS_editorial_top2.jpg" class="fancylight popup-btn" data-fancybox-group="light">
<img class="img-fluid" src="././assets/images/FS_editorial_top2.jpg" alt="">
</a>
</div>
<div class="item AB col-5">
<a href="././assets/images/FS_editorial_top3.jpg" class="fancylight popup-btn" data-fancybox-group="light">
<img class="img-fluid" src="././assets/images/FS_editorial_top3.jpg" alt="">
</a>
</div>
<div class="item AB col-5">
<a href="././assets/images/FS_editorial_top4.jpg" class="fancylight popup-btn" data-fancybox-group="light">
<img class="img-fluid" src="././assets/images/FS_editorial_top4.jpg" alt="">
</a>
</div>
<div class="item AB col-5">
<a href="././assets/images/FS_editorial_top5.jpg" class="fancylight popup-btn" data-fancybox-group="light">
<img class="img-fluid" src="././assets/images/FS_editorial_top5.jpg" alt="">
</a>
</div>
<div class="item AB col-5">
<a href="././assets/images/FS_editorial_top6.jpg" class="fancylight popup-btn" data-fancybox-group="light">
<img class="img-fluid" src="././assets/images/FS_editorial_top6.jpg" alt="">
</a>
</div>
<div class="item AB col-5">
<a href="././assets/images/FS_editorial_top7.jpg" class="fancylight popup-btn" data-fancybox-group="light">
<img class="img-fluid" src="././assets/images/FS_editorial_top7.jpg" alt="">
</a>
</div>
<div class="item TI col-5">
<a href="././assets/images/FS_editorial_top8.jpg" class="fancylight popup-btn" data-fancybox-group="light">
<img class="img-fluid" src="././assets/images/FS_editorial_top8.jpg" alt="">
</a>
</div>
<div class="item TI col-5">
<a href="././assets/images/FS_editorial_top9.jpg" class="fancylight popup-btn" data-fancybox-group="light">
<img class="img-fluid" src="././assets/images/FS_editorial_top9.jpg" alt="">
</a>
</div>
<div class="item TI col-5">
<a href="././assets/images/FS_editorial_top10.jpg" class="fancylight popup-btn" data-fancybox-group="light">
<img class="img-fluid" src="././assets/images/FS_editorial_top10.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.portfolio-item').isotope({
itemSelector: '.item',
layoutMode: 'fitRows'
});
$('.portfolio-menu ul li').click(function(){
$('.portfolio-menu ul li').removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$('.portfolio-item').isotope({
filter:selector
});
return false;
});
$(document).ready(function() {
var popup_btn = $('.popup-btn');
popup_btn.magnificPopup({
type : 'image',
gallery : {
enabled : true
}
});
});
</script>