图片筛选导航功能异常：点击链接跳转首页而非筛选图片

嘿，我一眼就瞅出问题所在啦——你的导航链接用的是<a href="">，点击时浏览器会触发默认的页面跳转行为（空href会直接跳转到当前首页index.html），这直接打断了你的JS筛选逻辑，页面都刷新了，自然看不到筛选效果！

给你两个简单的修复方案，推荐第一个更灵活的：

方案一：在JS中阻止默认行为 #

修改你的jQuery代码，在点击事件处理函数里添加event.preventDefault()，直接阻止a标签的跳转动作：

$(document).ready(function() {
  $(".button").click(function(event) { // 接收event参数
    // 核心：阻止a标签的默认跳转行为
    event.preventDefault();
    
    var name = $(this).attr("data-filter");
    if (name == "all") {
      $(".filter").show(2000);
    } else {
      // 优化逻辑：先隐藏所有图片，再显示目标分类，DOM操作更高效
      $(".filter").hide(2000);
      $(".filter." + name).show(2000);
    }
    // 额外优化：给当前点击的按钮加上active状态，移除其他按钮的active
    $(this).addClass("active").siblings().removeClass("active");
  });
});

方案二：修改a标签的href属性 #

把所有导航a标签的href=""改成href="javascript:void(0)"，这样点击时就不会触发跳转：

<div class="navigation">
  <a href="javascript:void(0)" data-filter="all" class="button active">ALL</a>
  <a href="javascript:void(0)" data-filter="one" class="button">ONE</a>
  <a href="javascript:void(0)" data-filter="two" class="button">TWO</a>
  <a href="javascript:void(0)" data-filter="three" class="button">THREE</a>
</div>

小提示 #

• 原始筛选逻辑里的not()+filter()可以合并成先隐藏所有再显示目标，减少DOM操作次数，性能更好。
• 加上按钮的active状态切换，用户能直观看到当前选中的分类，体验更友好。

现在试试修改后的代码，应该就能正常实现图片筛选功能啦！

内容的提问来源于stack exchange，提问作者Michael Kibuku