0
필터링 할 때 활성 버튼을 확인합니다. 따라서 필터를 사용하기 위해 동위 원소를 사용하려고합니다.하지만 작업 버튼을 누르면 필터가 활성 버튼에 클래스를 추가하지 않습니다 .is- 체크 "하고 마지막 것에서 제거하십시오. 아마 내 바보 같은 문법 실수. 사람이 무엇을 볼 수 필터링 동위 원소를
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/lightbox.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-center">Portfolio</h1>
<div class="button-group filter-button-group text-center">
<button class="button is-checked" data-filter="*">All</button>
<button class="button" data-filter=".metal">Web Design</button>
<button class="button" data-filter=".transition">Photography</button>
</div>
<div class="grid">
<div class="grid-sizer col-xs-6 col-sm-4 col-md-4 col-lg-3"></div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 metal">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-1.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-1.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 transition">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-2.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-2.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 metal">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-3.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-3.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 transition">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-4.jpeg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-4.jpeg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 metal">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-5.jpeg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-5.jpeg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 transition">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-6.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-6.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 metal">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-7.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-7.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 transition">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-8.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-8.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 metal">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-9.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-9.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 transition">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-10.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-10.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 metal">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-11.jeg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-11.jpg">
</a>
</div>
</div>
<div class="grid-item col-xs-6 col-sm-4 col-md-4 col-lg-3 transition">
<div class="grid-item-content">
<a data-lightbox="test-1" data-title="My caption" href="images/nyc-12.jpg">
<img alt="Responsive image" class="img-responsive" src="images/nyc-12.jpg">
</a>
</div>
</div>
</div>
</div>
<div class="parallax-window" data-parallax="scroll" data-image-src="images/nyc-2.jpg"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/isotope.pkgd.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/lightbox.min.js"></script>
<script>
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
}
});
$('.filter-button-group').on('click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue }),$(window).trigger('resize.px.parallax');
});
function radioButtonGroup(buttonGroup) {
buttonGroup.addEventListener('click', function(event) {
// only work with buttons
if (!matchesSelector(event.target, 'button')) {
return;
}
buttonGroup.querySelector('.is-checked').classList.remove('is-checked');
event.target.classList.add('is-checked');
});
}
</script>
여기에 잘못 그리고 당신은 buttonGroup 정의하는 데 필요한 곳에 당신은 코드의 부분을 왼쪽
.grid-item {
margin-bottom:;
padding:5px;
}
.parallax-window{
min-height:300px;
}
.filter-button-group button{
}
.button.is-checked {
background-color: #28F;
}
감사합니다! ! 이제 작동 :) –