综述: 优化商家端web菜单导航功能

- 在菜单链接的loadContent函数调用中添加this参数,便于在函数内部标识当前点击的元素
- 简化订单管理菜单结构,将原来的二级菜单改为直接链接到订单管理页面
- 完善loadContent函数,增加对clickElement参数的处理以实现菜单项高亮显示
- 优化菜单交互体验,确保正确标识当前活动菜单项
This commit is contained in:
linbin 2025-09-25 00:02:18 +08:00
parent aeae075443
commit fc8265d202
1 changed files with 14 additions and 21 deletions

View File

@ -296,11 +296,11 @@
</span> </span>
</div> </div>
<div class="submenu"> <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> <span class="submenu-icon"></span>
子经营者管理 子经营者管理
</a> </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> <span class="submenu-icon"></span>
商户管理 商户管理
</a> </a>
@ -308,25 +308,16 @@
</li> </li>
<li class="menu-item"> <li class="menu-item">
<div class="menu-link" onclick="toggleSubmenu(this)"> <a href="#" class="menu-link" onclick="loadContent('./订单管理/订单管理.html', this)">
<span class="menu-icon"> <span class="menu-icon">
<i class="fas fa-tasks"></i> <i class="fas fa-tasks"></i>
</span> </span>
<span class="menu-text">运营管理</span> <span class="menu-text">订单管理</span>
<span class="menu-arrow"> </a>
<i class="fas fa-chevron-right"></i>
</span>
</div>
<div class="submenu">
<a href="#" class="submenu-link">
<span class="submenu-icon"></span>
订单管理
</a>
</div>
</li> </li>
<li class="menu-item"> <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"> <span class="menu-icon">
<i class="fas fa-box"></i> <i class="fas fa-box"></i>
</span> </span>
@ -471,24 +462,26 @@
} }
// 加载内容到iframe // 加载内容到iframe
function loadContent(url) { function loadContent(url, clickedElement) {
const contentPlaceholder = document.getElementById('contentPlaceholder'); const contentPlaceholder = document.getElementById('contentPlaceholder');
const contentFrame = document.getElementById('contentFrame'); const contentFrame = document.getElementById('contentFrame');
// 隐藏占位内容显示iframe // 隐藏占位内容显示iframe
contentPlaceholder.style.display = 'none'; contentPlaceholder.style.display = 'none';
contentFrame.style.display = 'block'; contentFrame.style.display = 'block';
// 加载指定URL到iframe // 加载指定URL到iframe
contentFrame.src = url; contentFrame.src = url;
// 移除所有菜单高亮 // 移除所有菜单高亮
document.querySelectorAll('.menu-link, .submenu-link').forEach(l => { document.querySelectorAll('.menu-link, .submenu-link').forEach(l => {
l.classList.remove('active'); l.classList.remove('active');
}); });
// 添加当前点击菜单项的高亮 // 添加当前点击菜单项的高亮
event.target.classList.add('active'); if (clickedElement) {
clickedElement.classList.add('active');
}
// 动态调整iframe高度以适应内容 // 动态调整iframe高度以适应内容
contentFrame.onload = function() { contentFrame.onload = function() {