综述: 优化商家端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>
</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() {