填加侧边栏标签筛选功能
This commit is contained in:
parent
6d5a957bc9
commit
f66007aaeb
@ -85,3 +85,11 @@
|
||||
.sidebar {
|
||||
flex: 1 1 250px; /* 允许侧边栏在可用空间内缩放 */
|
||||
}
|
||||
|
||||
/* 侧边栏按钮容器 */
|
||||
#sidebar {
|
||||
display: flex;
|
||||
flex-direction: column; /* 垂直排列按钮 */
|
||||
align-items: center; /* 确保按钮水平居中 */
|
||||
padding-top: 30px;
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
|
||||
50
index.html
50
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>
|
||||
|
||||
58
javascape/tag.js
Normal file
58
javascape/tag.js
Normal file
@ -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'; // 文字颜色为白色，便于对比
|
||||
}
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user