图像过滤器导航

Question

我有所有代码，对我来说似乎没问题，但是当我单击导航链接时，链接被定向到索引.html或登陆项目。如何使链接过滤图像？

这是Javascript和html

$(document).ready(function() {
$(".button").click(function() {
var name = $(this).attr("data-filter");
if (name == "all") {
$(".filter").show("2000");
} else {
$(".filter").not("." + name).hide("2000");
$(".filter").filter("." + name).show("2000");
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="portfolio">
<div style="text-align: center">
<div class="navigation">
<a href="" data-filter="all" class="button active">ALL</a>
<a href="" data-filter="one" class="button">ONE</a>
<a href="" data-filter="two" class="button">TWO</a>
<a href="" data-filter="three" class="button">THREE</a>
</div>
<div class="ImageContainer">
<div class="filter one">
<img src="img/beach.jpg" width="400px" height="250px">
</div>
<div class="filter one">
<img src="img/Windows.jpg" width="400px" height="250px">
</div>

我希望我的图像可以过滤，但它们的导航链接不起作用

Answer 1

您需要阻止链接的默认操作，并将数字更改为数字(删除 2000 周围的引号(

$(document).ready(function() {
$(".button").click(function(e) {  // pass the event back into the function
e.preventDefault();             // prevent the link action
var name = $(this).attr("data-filter");
if (name == "all") {
$(".filter").show(2000);      // remove quotes
} else {
$(".filter").not("." + name).hide(2000);
$(".filter").filter("." + name).show(2000);
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="portfolio">
<div style="text-align: center">
<div class="navigation">
<a href="" data-filter="all" class="button active">ALL</a>
<a href="" data-filter="one" class="button">ONE</a>
<a href="" data-filter="two" class="button">TWO</a>
<a href="" data-filter="three" class="button">THREE</a>
</div>
<div class="ImageContainer">
<div class="filter one">
<img src="img/beach.jpg" width="400px" height="250px">
</div>
<div class="filter one">
<img src="img/Windows.jpg" width="400px" height="250px">
</div>