實現流程
結構搭建（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>
![[機器學習]基于K-means聚類算法的鳶尾花數據及分類](http://pic.xiahunao.cn/[機器學習]基于K-means聚類算法的鳶尾花數據及分類)
---PCB鋪銅相關操作)
函數分析)
