58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// 绑定所有 tag-btn 的点击事件
|
|
document.querySelectorAll('.tag-btn').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
if (button.id === 'show-all') {
|
|
// 显示所有工具卡片
|
|
document.querySelectorAll('.tool-card').forEach(card => {
|
|
card.style.display = 'block';
|
|
});
|
|
} else {
|
|
const selectedTag = button.getAttribute('data-tag');
|
|
document.querySelectorAll('.tool-card').forEach(card => {
|
|
// 查找卡片中 .tool-category 元素
|
|
const tagElem = card.querySelector('.tool-category');
|
|
if (tagElem && tagElem.textContent.trim() === selectedTag) {
|
|
card.style.display = 'block';
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
document.getElementById('show-all').addEventListener('click', () => {
|
|
document.querySelectorAll('.tool-card').forEach(card => {
|
|
card.style.display = 'block';
|
|
});
|
|
});
|
|
|
|
const tagColors = {
|
|
全部: '#DDDDDD',
|
|
教育: '#FF8888',
|
|
编程: '#FFBB66',
|
|
资源: '#66FF66'
|
|
};
|
|
|
|
// 遍历所有标签
|
|
document.querySelectorAll('.tool-category').forEach(span => {
|
|
// 读取 data-tag 属性
|
|
const tag = span.dataset.tag; // 等同于 span.getAttribute('data-tag')
|
|
// 如果 tagColors 中存在对应的颜色，则设置背景色
|
|
if (tagColors[tag]) {
|
|
span.style.backgroundColor = tagColors[tag];
|
|
span.style.color = '#fff'; // 文字颜色为白色，便于对比
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('.tag-btn').forEach(span => {
|
|
// 读取 data-tag 属性
|
|
const tag = span.dataset.tag; // 等同于 span.getAttribute('data-tag')
|
|
// 如果 tagColors 中存在对应的颜色，则设置背景色
|
|
if (tagColors[tag]) {
|
|
span.style.backgroundColor = tagColors[tag];
|
|
span.style.color = '#fff'; // 文字颜色为白色，便于对比
|
|
}
|
|
}); |