页面跳转html
实现流程
结构搭建（HTML）
创建侧边栏容器，通过列表或 div 元素定义导航项，每个项包含图标（可使用字体图标库如 Font Awesome）和文字，为后续点击交互预留事件触发点。样式设计（CSS）
设置侧边栏的布局（固定定位、宽度、高度等），定义导航项的默认样式、hover（悬停）样式和 active（选中）样式，确保图标 + 文字的组合清晰易识别。交互逻辑（JavaScript）
为每个导航项绑定点击事件，实现点击后的功能（如页面跳转、内容切换等），同时更新选中状态的样式（高亮当前点击项）
关键说明
- 结构层：通过
data-target属性标识每个导航项对应的功能，便于 JS 逻辑区分。 - 样式层：使用
active类控制选中状态的高亮样式，hover 效果提升交互体验。 - 交互层：点击事件触发时，先更新 UI（选中状态），再通过
handleNavClick函数执行具体功能（如页面跳转、显示对应内容等），可根据实际需求扩展（如 SPA 应用的内容切换、后端路由跳转等）。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>侧边导航菜单</title> <!-- 引入字体图标库 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> /* 侧边栏样式 */ .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 220px; background-color: #2c3e50; color: white; padding-top: 20px; } /* 导航项样式 */ .nav-item { padding: 15px 20px; display: flex; align-items: center; cursor: pointer; transition: background-color 0.3s; } .nav-item:hover { background-color: #34495e; } .nav-item.active { background-color: #1abc9c; } /* 图标样式 */ .nav-item i { margin-right: 10px; width: 20px; text-align: center; } </style> </head> <body> <!-- 侧边导航容器 --> <div class="sidebar"> <div class="nav-item" data-target="home"> <i class="fas fa-home"></i> <span>首页</span> </div> <div class="nav-item" data-target="transfer"> <i class="fas fa-exchange-alt"></i> <span>传输</span> </div> <div class="nav-item" data-target="backup"> <i class="fas fa-shield-alt"></i> <span>备份</span> </div> <div class="nav-item" data-target="quick-transfer"> <i class="fas fa-bolt"></i> <span>快传</span> </div> <div class="nav-item" data-target="knowledge"> <i class="fas fa-book"></i> <span>知识库</span> </div> <div class="nav-item" data-target="tools"> <i class="fas fa-wrench"></i> <span>工具</span> </div> </div> <script> // 获取所有导航项 const navItems = document.querySelectorAll('.nav-item'); // 为每个导航项绑定点击事件 navItems.forEach(item => { item.addEventListener('click', function() { // 移除所有项的选中状态 navItems.forEach(nav => nav.classList.remove('active')); // 给当前点击项添加选中状态 this.classList.add('active'); // 获取目标功能标识（可根据实际需求实现跳转或内容切换） const target = this.getAttribute('data-target'); handleNavClick(target); }); }); // 处理导航点击后的逻辑（示例） function handleNavClick(target) { switch(target) { case 'home': console.log('跳转到首页'); // 实际应用中可使用 window.location.href = 'home.html' 跳转 break; case 'transfer': console.log('打开传输功能'); break; case 'backup': console.log('打开备份功能'); break; case 'quick-transfer': console.log('打开快传功能'); break; case 'knowledge': console.log('打开知识库'); break; case 'tools': console.log('打开工具集'); break; } } </script> </body> </html>