0
だから、アイソトープを使ってフィルタリングしたり、その作業をしようとしています...しかし、フィルタをかけるためにボタンを押すと、アクティブなボタンにクラスが追加されません。チェックして、最後のものから削除します。おそらく私の部分では、ちょっとばかげた文法間違いでしょう。誰もがフィルタリングするときにアクティブなボタンをチェックする
<!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>
ここで間違っているものを参照してくださいそして、私のcssができ
.grid-item {
margin-bottom:;
padding:5px;
}
.parallax-window{
min-height:300px;
}
.filter-button-group button{
}
.button.is-checked {
background-color: #28F;
}
を！ ！今働く:) –