填加侧边栏标签筛选功能

css/sidebar.css

@@ -85,3 +85,11 @@
 .sidebar {
     flex: 1 1 250px; /* 允许侧边栏在可用空间内缩放 */
 }
+
+/* 侧边栏按钮容器 */
+#sidebar {
+    display: flex;
+    flex-direction: column; /* 垂直排列按钮 */
+    align-items: center; /* 确保按钮水平居中 */
+    padding-top: 30px;
+}

css/toolcard.css

@@ -81,7 +81,7 @@
 .tool-category {
     display: inline-block; /* 使标签处于同一行 */
     padding: 4px 16px; /* 胶囊形状的内边距，横向较宽 */
-    background-color: #fc8f8f; /* 背景颜色 */
+    /*background-color: #fc8f8f; /* 背景颜色 */
     color: #ffffff; /* 文字颜色 */
     font-size: 10px; /* 字体大小 */
     font-weight: bold; /* 加粗字体 */
@@ -103,3 +103,32 @@
     transform: scale(1.03);
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
 }
+
+/* 按钮样式：药丸形 */
+.tag-btn {
+    display: block; /* 让按钮变成 block 级元素 */
+    width: 100px; /* 设置按钮的宽度 */
+    height: 34px; /* 设置按钮的高度 */
+    padding: 8px 10px; /* 调整内边距，让内容更舒适 */
+    border-radius: 20px;
+    color: #fff;
+    margin: 5px;
+    border: none;
+    cursor: pointer;
+    font-weight: bold; /* 加粗字体 */
+    text-align: center; /* 让文字居中 */
+    line-height: 17px; /* 调整文本垂直居中 */
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+}
+
+/* 按钮动画完成状态 */
+.tag_btn.animated {
+    opacity: 1;
+    transform: translateY(0); /* 恢复到正常位置 */
+}
+
+/* 按钮悬停效果 */
+.tag-btn:hover {
+    transform: scale(1.03);
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+}

index.html

@@ -38,6 +38,21 @@
                 </div>
             </a>
         </nav>
+        <div id="sidebar">
+            <div>
+                <button class="tag-btn" id="show-all" data-tag="全部">全部显示</button>
+            </div>
+            <div>
+                <button class="tag-btn" data-tag="教育">教育</button>
+            </div>
+            <div>
+                <button class="tag-btn" data-tag="编程">编程</button>
+            </div>
+            <div>
+                <button class="tag-btn" data-tag="资源">资源</button>
+            </div>
+            <!-- 根据需要添加更多按钮 -->
+        </div>
     </aside>
 
     <main class="main-content">
@@ -48,7 +63,7 @@
                     <div class="tool-name">浙江科技大学</div>
                     <div class="card-description">崇德 尚用 求真 创新</div>
                 </a>
-                <span class="tool-category">教育</span>
+                <span class="tool-category" data-tag="教育">教育</span>
             </div>
             
             <div class="tool-card">
@@ -57,7 +72,7 @@
                     <div class="tool-name">GitHub</div>
                     <div class="card-description">Description of the tool.</div>
                 </a>
-                <span class="tool-category">编程</span>
+                <span class="tool-category" data-tag="编程">编程</span>
             </div>
 
             <div class="tool-card">
@@ -66,7 +81,7 @@
                     <div class="tool-name">BT之家—1LOU站</div>
                     <div class="card-description">Description of the tool.</div>
                 </a>
-                <span class="tool-category">资源</span>
+                <span class="tool-category" data-tag="资源">资源</span>
             </div>
 
             <div class="tool-card">
@@ -75,7 +90,7 @@
                     <div class="tool-name">电影天堂</div>
                     <div class="card-description">Description of the tool.</div>
                 </a>
-                <span class="tool-category">资源</span>
+                <span class="tool-category" data-tag="资源">资源</span>
             </div>
 
             <div class="tool-card">
@@ -84,7 +99,7 @@
                     <div class="tool-name">Seedhub</div>
                     <div class="card-description">Description of the tool.</div>
                 </a>
-                <span class="tool-category">资源</span>
+                <span class="tool-category" data-tag="资源">资源</span>
             </div>
 
             <div class="tool-card">
@@ -93,7 +108,7 @@
                     <div class="tool-name">自动化与电气工程学院</div>
                     <div class="card-description">浙江科技大学|自动化与电气工程学院.</div>
                 </a>
-                <span class="tool-category">教育</span>
+                <span class="tool-category" data-tag="教育">教育</span>
             </div>
 
             <div class="tool-card">
@@ -102,7 +117,7 @@
                     <div class="tool-name">浙江科技大学12</div>
                     <div class="card-description">Description of the tool.</div>
                 </a>
-                <span class="tool-category">教育</span>
+                <span class="tool-category" data-tag="教育">教育</span>
             </div>
 
             <div class="tool-card">
@@ -111,7 +126,7 @@
                     <div class="tool-name">浙江科技大学2</div>
                     <div class="card-description">Description of the tool.</div>
                 </a>
-                <span class="tool-category">教育</span>
+                <span class="tool-category" data-tag="教育">教育</span>
             </div>
 
             <div class="tool-card">
@@ -120,7 +135,7 @@
                     <div class="tool-name">浙江科技大学22</div>
                     <div class="card-description">Description of the tool.</div>
                 </a>
-                <span class="tool-category">教育</span>
+                <span class="tool-category" data-tag="教育">教育</span>
             </div>
 
             <div class="tool-card">
@@ -129,7 +144,7 @@
                     <div class="tool-name">浙江科技大学321</div>
                     <div class="card-description">Description of the tool.</div>
                 </a>
-                <span class="tool-category">教育</span>
+                <span class="tool-category" data-tag="教育">教育</span>
             </div>
 
             <div class="tool-card">
@@ -138,7 +153,7 @@
                     <div class="tool-name">浙江科技大学3333</div>
                     <div class="card-description">Description of the tool.</div>
                 </a>
-                <span class="tool-category">教育</span>
+                <span class="tool-category" data-tag="教育">教育</span>
             </div>
 
             <div class="tool-card">
@@ -147,7 +162,7 @@
                     <div class="tool-name">浙江科技大学123</div>
                     <div class="card-description">Description of the tool.</div>
                 </a>
-                <span class="tool-category">教育</span>
+                <span class="tool-category" data-tag="教育">教育</span>
             </div>
 
             <div class="tool-card">
@@ -156,7 +171,7 @@
                     <div class="tool-name">浙江科技大学123</div>
                     <div class="card-description">Description of the tool.</div>
                 </a>
-                <span class="tool-category">教育</span>
+                <span class="tool-category" data-tag="教育">教育</span>
             </div>
 
             <div class="tool-card">
@@ -165,7 +180,7 @@
                     <div class="tool-name">浙江科技大学123</div>
                     <div class="card-description">Description of the tool.</div>
                 </a>
-                <span class="tool-category">教育</span>
+                <span class="tool-category" data-tag="教育">教育</span>
             </div>
 
             <div class="tool-card">
@@ -174,7 +189,7 @@
                     <div class="tool-name">浙江科技大学123</div>
                     <div class="card-description">Description of the tool.</div>
                 </a>
-                <span class="tool-category">教育</span>
+                <span class="tool-category" data-tag="教育">教育</span>
             </div>
 
             <div class="tool-card">
@@ -183,7 +198,7 @@
                     <div class="tool-name">浙江科技大学123</div>
                     <div class="card-description">Description of the tool.</div>
                 </a>
-                <span class="tool-category">教育</span>
+                <span class="tool-category" data-tag="教育">教育</span>
             </div>
 
             <div class="tool-card">
@@ -192,7 +207,7 @@
                     <div class="tool-name">GitHub1</div>
                     <div class="card-description">Description of the tool.</div>
                 </a>
-                <span class="tool-category">编程</span>
+                <span class="tool-category" data-tag="编程">编程</span>
             </div>
             <!-- 更多工具卡片 -->
         </div>
@@ -206,6 +221,7 @@
     <script src="javascape/scroll.js"></script>
     <script src="javascape/search.js"></script>
     <script src="javascape/sidebar.js"></script>
+    <script src="javascape/tag.js"></script>
 
 </body>
 </html>

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