填加侧边栏标签筛选功能

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';  // 文字颜色为白色，便于对比
+    }
+});