当前位置：首页 > 文章列表 > 文章 > 前端 > 页面筛选功能实现教程详解

页面筛选功能实现教程详解

2025-09-07 19:39:34 0浏览收藏

想要实现页面选项过滤功能吗？本文将为你提供一份详细的实现教程，手把手教你利用HTML、CSS和JavaScript构建动态卡片，并根据用户选择的类别进行内容过滤。**页面选项过滤实现教程详解：** 本文将深入解析HTML结构搭建、CSS样式美化以及JavaScript代码逻辑，包括动态卡片生成、`hide`类控制元素显隐等关键步骤。通过学习本文，你将掌握如何创建交互式页面，提升用户体验，让页面内容展示更灵活、更高效。无论你是Web开发新手还是有一定经验的开发者，都能从中受益，快速掌握页面选项过滤功能的实现技巧，并应用到实际项目中。快来一起学习吧！

实现页面选项过滤功能的教程

本文档旨在指导开发者如何实现一个简单的页面选项过滤功能。通过创建动态卡片并利用 JavaScript 控制其显示与隐藏，可以根据用户选择的类别过滤页面内容。本文将详细介绍 HTML 结构、CSS 样式和 JavaScript 代码，并提供完整的示例代码和注意事项，帮助读者快速掌握该功能的实现方法。

准备工作

在开始之前，请确保你已经具备以下基础知识：

HTML：了解 HTML 结构和常用标签。
CSS：了解 CSS 样式和选择器。
JavaScript：了解 JavaScript 语法和 DOM 操作。

HTML 结构

首先，我们需要创建 HTML 结构。主要包含以下几个部分：

按钮区域 (buttons)：用于放置过滤选项按钮。
内容展示区域 (schools)：用于动态生成和展示卡片内容。

<div class="wrapper">
  <div id="buttons">
    <button class="button-value" onclick="filterSchool('all')">All</button>
    <button class="button-value" onclick="filterSchool('Catholic')">Catholic School</button>
    <button class="button-value" onclick="filterSchool('Regular')">Regular School</button>
    <button class="button-value" onclick="filterSchool('University')">University</button>
    <button class="button-value" onclick="filterSchool('College')">College</button>
  </div>
  <div id="schools"></div>
</div>

CSS 样式

接下来，我们定义 CSS 样式，用于美化页面和控制元素的显示。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: white;
}

button {
  cursor: pointer;
}

.wrapper {
  position: absolute;
  top: 5%;
  left: 20%;
  width: 95%;
  margin: 0 auto;
}

.button-value {
  border: 2px solid black;
  padding: 0.5px 10px;
  border-radius: 3em;
  background-color: transparent;
  transition: 0.3s ease-in-out;
}

.button-value:focus {
  background-color: black;
  color: white;
}

#schools {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 1.5em;
  padding: 2em 0;
}

.card {
  background-color: white;
  max-width: 18em;
  margin-top: 1em;
  padding: 1em;
  border-radius: 5px;
  box-shadow: 1em 2em 2.5em rgba(0, 0, 0, 0.19);
}

.image-container {
  text-align: center;
}

img {
  max-width: 100%;
  object-fit: contain;
  height: 15em;
}

.container {
  padding-top: 1em;
  color: black;
}

/* 关键：定义 .hide 类的样式 */
.hide {
  display: none;
}

@media screen and (max-width: 720px) {
  img {
    max-width: 100%;
    object-fit: contain;
    height: 10em;
  }
  .card {
    max-width: 10em;
    margin-top: 1em;
  }
  #schools {
    grid-template-columns: auto auto;
    grid-column-gap: 1em;
  }
}

重点： .hide { display: none; } 这一行代码至关重要。 JavaScript 通过添加或移除 hide 类来控制卡片的显示和隐藏。如果没有定义 hide 类，卡片将始终显示。

JavaScript 代码

最后，我们编写 JavaScript 代码来实现动态生成卡片和过滤功能。

let schools = {
  data: [{
      schoolName: "Edmonton Catholic School District",
      category: "Catholic",
      image: "ecsd.png"
    },
    {
      schoolName: "Edmonton Public School",
      category: "Regular",
      image: "publicimg.jpg"
    },
    {
      schoolName: "Northern Alberta Institution of Technology",
      category: "College",
      image: "NAIT.png"
    },
    {
      schoolName: "University of Alberta",
      category: "University",
      image: "University-of-Alberta.png"
    },
  ],
};

// 动态生成卡片
for (let i of schools.data) {
  // 创建卡片元素
  let card = document.createElement("div");

  // 添加卡片类名和类别类名，初始状态隐藏
  card.classList.add("card", i.category, "hide");

  // 创建图片容器
  let imgContainer = document.createElement("div");
  imgContainer.classList.add("image-container");

  // 创建图片元素
  let image = document.createElement("img");
  image.setAttribute("src", i.image);
  imgContainer.appendChild(image);
  card.appendChild(imgContainer);

  // 创建内容容器
  let container = document.createElement("div");
  container.classList.add("container");

  // 创建学校名称元素
  let name = document.createElement("h5");
  name.classList.add("school-name");
  name.innerText = i.schoolName.toUpperCase();
  container.appendChild(name);

  card.appendChild(container);
  document.getElementById("schools").appendChild(card);
}

// 过滤函数
function filterSchool(value) {
  let elements = document.querySelectorAll(".card");
  elements.forEach((element) => {
    if (value == "all") {
      // 显示所有卡片
      element.classList.remove("hide");
    } else {
      // 根据类别显示或隐藏卡片
      if (element.classList.contains(value)) {
        element.classList.remove("hide");
      } else {
        element.classList.add("hide");
      }
    }
  });
}

// 页面加载完成后显示所有卡片
window.onload = () => {
  filterSchool("all");
}

代码解释：

数据定义： schools 对象包含了学校的数据，包括学校名称、类别和图片。
动态生成卡片： for 循环遍历 schools.data 数组，为每个学校创建一个卡片元素，并设置相应的类名和内容。
过滤函数： filterSchool(value) 函数根据传入的类别值，显示或隐藏卡片。如果 value 为 "all"，则显示所有卡片。否则，只显示类别与 value 相同的卡片。
页面加载完成事件： window.onload 事件在页面加载完成后触发，调用 filterSchool("all") 函数，显示所有卡片。