如何使用 HTML、CSS 和 JavaScript 为 Portfolio Gallery 添加过滤器？

添加过滤器可以让你的Portfolio Gallery更加功能强大和易于浏览。下面是一些简易的步骤，你可以使用HTML、CSS和JavaScript来快速实现。

步骤

1. 首先，在HTML中为过滤器添加一个菜单。例如，你可以添加一些按钮或下拉菜单来让用户通过点击或选择来过滤所需的项目。这里，我们将添加一个下拉菜单和一个按钮来演示。

<select id="filter-category">
  <option value="all">全部</option>
  <option value="web-design">网页设计</option>
  <option value="graphic-design">平面设计</option>
  <option value="motion-graphics">动画设计</option>
</select>
<button id="filter-button">过滤</button>

2. 接下来，在JavaScript中添加代码来处理筛选逻辑。你可以使用document.querySelector()方法选择你在HTML中添加的菜单和按钮元素。

var filterCategory = document.querySelector('#filter-category');
var filterButton = document.querySelector('#filter-button');

3. 声明一个变量来保存所有的项目，方便后续的过滤操作。

var allProjects = document.querySelectorAll('.project');

4. 在按钮的click事件监听器函数中，我们可以根据过滤条件过滤出需要的项目，并且通过display属性来将不需要的项目隐藏起来。我们也可以使用classList属性来添加/移除CSS类，来更改样式，以突出显示特定类别的项目。

filterButton.addEventListener('click', function() {
  var selectedCategory = filterCategory.value;
  allProjects.forEach(function(project) {
    if (selectedCategory == 'all' || project.classList.contains(selectedCategory)) {
      project.style.display = 'block';
    } else {
      project.style.display = 'none';
    }
  });
});

5. 最后，在CSS中添加一些样式来突出显示选中类别的项目。你可以使用:hover伪类在鼠标悬停时添加一些额外的样式。

.project.highlight {
  border: 5px solid #CD5C5C;
}

.project:hover {
  opacity: 0.7;
  cursor: pointer;
}

总结

以上就是添加过滤器的基本步骤。你可以自由发挥，使用不同的过滤条件或样式来满足你的需求，让你的Portfolio Gallery更加出色和好用。