综述: 优化商家端web菜单导航功能
- 在菜单链接的loadContent函数调用中添加this参数,便于在函数内部标识当前点击的元素 - 简化订单管理菜单结构,将原来的二级菜单改为直接链接到订单管理页面 - 完善loadContent函数,增加对clickElement参数的处理以实现菜单项高亮显示 - 优化菜单交互体验,确保正确标识当前活动菜单项
This commit is contained in:
		
							parent
							
								
									aeae075443
								
							
						
					
					
						commit
						fc8265d202
					
				|  | @ -296,11 +296,11 @@ | |||
|                     </span> | ||||
|                 </div> | ||||
|                 <div class="submenu"> | ||||
|                     <a href="#" class="submenu-link" onclick="loadContent('./1 权限管理/子经营者管理.html')"> | ||||
|                     <a href="#" class="submenu-link" onclick="loadContent('./1 权限管理/子经营者管理.html', this)"> | ||||
|                         <span class="submenu-icon"></span> | ||||
|                         子经营者管理 | ||||
|                     </a> | ||||
|                     <a href="#" class="submenu-link" onclick="loadContent('./1 权限管理/商户管理.html')"> | ||||
|                     <a href="#" class="submenu-link" onclick="loadContent('./1 权限管理/商户管理.html', this)"> | ||||
|                         <span class="submenu-icon"></span> | ||||
|                         商户管理 | ||||
|                     </a> | ||||
|  | @ -308,25 +308,16 @@ | |||
|             </li> | ||||
|              | ||||
|             <li class="menu-item"> | ||||
|                 <div class="menu-link" onclick="toggleSubmenu(this)"> | ||||
|                 <a href="#" class="menu-link" onclick="loadContent('./订单管理/订单管理.html', this)"> | ||||
|                     <span class="menu-icon"> | ||||
|                         <i class="fas fa-tasks"></i> | ||||
|                     </span> | ||||
|                     <span class="menu-text">运营管理</span> | ||||
|                     <span class="menu-arrow"> | ||||
|                         <i class="fas fa-chevron-right"></i> | ||||
|                     </span> | ||||
|                 </div> | ||||
|                 <div class="submenu"> | ||||
|                     <a href="#" class="submenu-link"> | ||||
|                         <span class="submenu-icon"></span> | ||||
|                         订单管理 | ||||
|                     </a> | ||||
|                 </div> | ||||
|                     <span class="menu-text">订单管理</span> | ||||
|                 </a> | ||||
|             </li> | ||||
| 
 | ||||
|             <li class="menu-item"> | ||||
|                 <a href="#" class="menu-link" onclick="loadContent('./商品管理/商品管理.html')"> | ||||
|                 <a href="#" class="menu-link" onclick="loadContent('./商品管理/商品管理.html', this)"> | ||||
|                     <span class="menu-icon"> | ||||
|                         <i class="fas fa-box"></i> | ||||
|                     </span> | ||||
|  | @ -471,24 +462,26 @@ | |||
|         } | ||||
| 
 | ||||
|         // 加载内容到iframe | ||||
|         function loadContent(url) { | ||||
|         function loadContent(url, clickedElement) { | ||||
|             const contentPlaceholder = document.getElementById('contentPlaceholder'); | ||||
|             const contentFrame = document.getElementById('contentFrame'); | ||||
|              | ||||
| 
 | ||||
|             // 隐藏占位内容,显示iframe | ||||
|             contentPlaceholder.style.display = 'none'; | ||||
|             contentFrame.style.display = 'block'; | ||||
|              | ||||
| 
 | ||||
|             // 加载指定URL到iframe | ||||
|             contentFrame.src = url; | ||||
|              | ||||
| 
 | ||||
|             // 移除所有菜单高亮 | ||||
|             document.querySelectorAll('.menu-link, .submenu-link').forEach(l => { | ||||
|                 l.classList.remove('active'); | ||||
|             }); | ||||
|              | ||||
| 
 | ||||
|             // 添加当前点击菜单项的高亮 | ||||
|             event.target.classList.add('active'); | ||||
|             if (clickedElement) { | ||||
|                 clickedElement.classList.add('active'); | ||||
|             } | ||||
|              | ||||
|             // 动态调整iframe高度以适应内容 | ||||
|             contentFrame.onload = function() { | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue