@@ -48,7 +63,7 @@
浙江科技大学
崇德 尚用 求真 创新
- 教育 + 教育
@@ -57,7 +72,7 @@
GitHub
Description of the tool.
- 编程 + 编程
@@ -66,7 +81,7 @@
BT之家—1LOU站
Description of the tool.
- 资源 + 资源
@@ -75,7 +90,7 @@
电影天堂
Description of the tool.
- 资源 + 资源
@@ -84,7 +99,7 @@
Seedhub
Description of the tool.
- 资源 + 资源
@@ -93,7 +108,7 @@
自动化与电气工程学院
浙江科技大学|自动化与电气工程学院.
- 教育 + 教育
@@ -102,7 +117,7 @@
浙江科技大学12
Description of the tool.
- 教育 + 教育
@@ -111,7 +126,7 @@
浙江科技大学2
Description of the tool.
- 教育 + 教育
@@ -120,7 +135,7 @@
浙江科技大学22
Description of the tool.
- 教育 + 教育
@@ -129,7 +144,7 @@
浙江科技大学321
Description of the tool.
- 教育 + 教育
@@ -138,7 +153,7 @@
浙江科技大学3333
Description of the tool.
- 教育 + 教育
@@ -147,7 +162,7 @@
浙江科技大学123
Description of the tool.
- 教育 + 教育
@@ -156,7 +171,7 @@
浙江科技大学123
Description of the tool.
- 教育 + 教育
@@ -165,7 +180,7 @@
浙江科技大学123
Description of the tool.
- 教育 + 教育
@@ -174,7 +189,7 @@
浙江科技大学123
Description of the tool.
- 教育 + 教育
@@ -183,7 +198,7 @@
浙江科技大学123
Description of the tool.
- 教育 + 教育
@@ -192,7 +207,7 @@
GitHub1
Description of the tool.
- 编程 + 编程
@@ -206,6 +221,7 @@ + diff --git a/javascape/tag.js b/javascape/tag.js new file mode 100644 index 0000000..a0e5109 --- /dev/null +++ b/javascape/tag.js @@ -0,0 +1,58 @@ +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 = { + 全部: '#CFCFCF', + 教育: '#fc8f8f', + 编程: '#66CD00', + 资源: '#1E90FF' +}; + +// 遍历所有标签 +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'; // 文字颜色为白色,便于对比 + } +}); \ No newline at end of file