分类筛选HTML模块
我将为您创建一个简洁、美观且响应式的分类筛选模块。这个模块将包含多个筛选类别，使用柔和的配色方案，并添加一些平滑的过渡动画来提升用户体验。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分类筛选模块</title>
<style>
/* 基础样式设置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
background-color: #f7f9fc;
color: #333;
line-height: 1.6;
padding: 20px;
}
.filter-container {
max-width: 1200px;
margin: 0 auto;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
padding: 25px;
transition: all 0.3s ease;
}
.filter-title {
font-size: 18px;
color: #2c3e50;
margin-bottom: 20px;
font-weight: 600;
border-left: 4px solid #3498db;
padding-left: 10px;
}
.filter-section {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #eaeaea;
}
.filter-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.section-title {
display: flex;
align-items: center;
font-size: 16px;
color: #2c3e50;
margin-bottom: 12px;
font-weight: 500;
}
.section-icon {
margin-right: 8px;
color: #3498db;
}
.filter-options {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.filter-option {
padding: 6px 14px;
background-color: #f1f5f9;
border-radius: 20px;
color: #64748b;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.filter-option:hover {
background-color: #e5eef7;
transform: translateY(-2px);
color: #3498db;
}
.filter-option.active {
background-color: #e1f0ff;
color: #3498db;
border-color: #3498db;
font-weight: 500;
}
.more-btn {
color: #3498db;
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
margin-top: 10px;
transition: all 0.2s ease;
}
.more-btn:hover {
color: #2980b9;
text-decoration: underline;
}
.filter-actions {
display: flex;
justify-content: flex-end;
margin-top: 20px;
gap: 15px;
}
.btn {
padding: 8px 20px;
border-radius: 6px;
border: none;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-reset {
background-color: #f8f9fa;
color: #64748b;
border: 1px solid #e2e8f0;
}
.btn-reset:hover {
background-color: #e9ecef;
}
.btn-apply {
background-color: #3498db;
color: white;
}
.btn-apply:hover {
background-color: #2980b9;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}
/* 响应式设计 */
@media (max-width: 768px) {
.filter-container {
padding: 16px;
}
.filter-option {
padding: 5px 12px;
font-size: 13px;
}
.filter-actions {
flex-direction: column;
gap: 10px;
}
.btn {
width: 100%;
}
}
/* 动画效果 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.filter-section {
animation: fadeIn 0.4s ease-out forwards;
}
.filter-section:nth-child(2) {
animation-delay: 0.1s;
}
.filter-section:nth-child(3) {
animation-delay: 0.2s;
}
.filter-section:nth-child(4) {
animation-delay: 0.3s;
}
.filter-section:nth-child(5) {
animation-delay: 0.4s;
}
</style>
</head>
<body>
<div class="filter-container">
<h2 class="filter-title">商品筛选</h2>
<!-- 分类筛选部分 -->
<div class="filter-section">
<div class="section-title">
<span class="section-icon">📁</span>
<span>商品分类</span>
</div>
<div class="filter-options">
<span class="filter-option active">全部</span>
<span class="filter-option">手机</span>
<span class="filter-option">电脑</span>
<span class="filter-option">家电</span>
<span class="filter-option">数码</span>
<span class="filter-option">服饰</span>
<span class="filter-option">美妆</span>
<span class="filter-option">食品</span>
<span class="filter-option">家居</span>
</div>
<div class="more-btn">显示更多 ↓</div>
</div>
<!-- 品牌筛选部分 -->
<div class="filter-section">
<div class="section-title">
<span class="section-icon">🏷️</span>
<span>品牌</span>
</div>
<div class="filter-options">
<span class="filter-option active">全部</span>
<span class="filter-option">苹果</span>
<span class="filter-option">三星</span>
<span class="filter-option">华为</span>
<span class="filter-option">小米</span>
<span class="filter-option">OPPO</span>
<span class="filter-option">vivo</span>
</div>
</div>
<!-- 价格区间筛选 -->
<div class="filter-section">
<div class="section-title">
<span class="section-icon">💰</span>
<span>价格区间</span>
</div>
<div class="filter-options">
<span class="filter-option active">全部</span>
<span class="filter-option">0-1000元</span>
<span class="filter-option">1000-2000元</span>
<span class="filter-option">2000-3000元</span>
<span class="filter-option">3000-5000元</span>
<span class="filter-option">5000元以上</span>
</div>
</div>
<!-- 其他属性筛选 -->
<div class="filter-section">
<div class="section-title">
<span class="section-icon">⭐</span>
<span>其他属性</span>
</div>
<div class="filter-options">
<span class="filter-option">促销</span>
<span class="filter-option">有优惠券</span>
<span class="filter-option">满减</span>
<span class="filter-option">包邮</span>
<span class="filter-option">京东自营</span>
<span class="filter-option">新品</span>
</div>
</div>
<!-- 按钮操作区 -->
<div class="filter-actions">
<button class="btn btn-reset">重置</button>
<button class="btn btn-apply">确定</button>
</div>
</div>
<script>
// 为筛选选项添加点击交互
document.querySelectorAll('.filter-option').forEach(option => {
option.addEventListener('click', function() {
// 如果是"全部"选项，则清除其他选项的激活状态
const parent = this.parentElement;
if (this.textContent === '全部') {
parent.querySelectorAll('.filter-option').forEach(opt => {
opt.classList.remove('active');
});
this.classList.add('active');
} else {
// 如果选中的不是"全部"，则清除"全部"的激活状态
const allOption = Array.from(parent.querySelectorAll('.filter-option')).find(opt => opt.textContent === '全部');
if (allOption) {
allOption.classList.remove('active');
}
}
// 切换当前选项的激活状态
this.classList.toggle('active');
// 如果当前分类下没有任何选中项，则默认选中"全部"
const hasActive = Array.from(parent.querySelectorAll('.filter-option')).some(opt => opt.classList.contains('active'));
if (!hasActive && allOption) {
allOption.classList.add('active');
}
});
});
// 显示更多按钮的交互
document.querySelector('.more-btn').addEventListener('click', function() {
const options = this.previousElementSibling;
if (options.style.maxHeight) {
options.style.maxHeight = null;
this.textContent = '显示更多 ↓';
} else {
options.style.maxHeight = '300px';
this.textContent = '收起 ↑';
}
});
// 重置按钮功能
document.querySelector('.btn-reset').addEventListener('click', function() {
document.querySelectorAll('.filter-options').forEach(optionGroup => {
optionGroup.querySelectorAll('.filter-option').forEach(opt => {
opt.classList.remove('active');
});
const allOption = optionGroup.querySelector('.filter-option:first-child');
if (allOption && allOption.textContent === '全部') {
allOption.classList.add('active');
}
});
});
// 确定按钮功能
document.querySelector('.btn-apply').addEventListener('click', function() {
// 收集所有选中的筛选条件
const selectedFilters = {};
document.querySelectorAll('.filter-section').forEach(section => {
const title = section.querySelector('.section-title span:last-child').textContent;
const selected = Array.from(section.querySelectorAll('.filter-option.active'))
.map(opt => opt.textContent)
.filter(text => text !== '全部');
if (selected.length > 0) {
selectedFilters[title] = selected;
}
});
// 在实际应用中，这里可以发送筛选条件到后端或更新页面显示
console.log('应用筛选条件:', selectedFilters);
alert('筛选条件已应用，请查看控制台输出');
});
</script>
</body>
</html>主要特点
- 清新柔和的配色方案：使用了淡蓝色作为主题色，搭配柔和的灰色和白色背景，视觉效果舒适。
- 响应式设计：适配各种屏幕尺寸，在移动设备上会自动调整布局。
动画效果：
- 筛选区域淡入动画
- 选项悬停时的微妙上浮效果
- 按钮点击时的反馈效果
交互功能：
- 筛选选项可以多选
- "全部"选项与其他选项互斥
- "显示更多"功能可展开/收起选项
- 重置按钮可清除所有选择
- 确定按钮应用筛选条件
用户体验优化：
- 清晰的分组和层次结构
- 适当的空间间距
- 视觉反馈指示当前选中的选项
您可以根据实际需求修改分类项、样式颜色或添加更多筛选条件。这个模块既可以独立使用，也可以集成到现有页面中。
需支付 5元 阅读剩余内容
