本文介绍一种基于 css 类控制与 javascript 协同的轻量级方案：初始状态下仅显示“login”菜单项，用户登录后动态启用其余导航项，无需修改 html 结构，兼容性好且易于维护。
本文介绍一种基于 css 类控制与 javascript 协同的轻量级方案：初始状态下仅显示“login”菜单项，用户登录后动态启用其余导航项，无需修改 html 结构，兼容性好且易于维护。
要实现“登录前仅显示 Login 项，登录后隐藏 Login 并启用 Settings/Configuration/About”的效果，核心思路是通过 CSS 控制显隐 + JavaScript 动态切换状态类，而非直接禁用 标签（disabled 属性对 无效）或移除 DOM。
✅ 推荐方案：CSS 类驱动 + JS 状态管理
首先，优化你的 CSS，利用 :not(.login) 和 .logged 类精准控制显示逻辑：
.menulist li {
list-style: none;
display: none; /* 默认全部隐藏 */
float: left;
line-height: 50px;
}
.menulist li a {
display: block;
text-decoration: none;
font-size: 14px; /* 补全单位 px */
font-family: Arial, sans-serif; /* 修正为 font-family，且推荐 fallback */
color: #1e1e1e;
padding: 0 20px;
}
/* 登录前：仅显示 login 项 */
.menulist li.login {
display: inline-block;
}
/* 登录后：添加 .logged 类到 ul，此时：
- login 项隐藏
- 其他项（非 login）显示为 inline-block
*/
.menulist.logged li.login {
display: none;
}
.menulist.logged li:not(.login) {
display: inline-block;
}
⚠️ 注意：
font-style: arial是错误写法，应为font-family: Arial, sans-serif；font-size: 14缺少单位，必须写为14px。
✅ JavaScript 登录状态控制（简单示例）
在用户成功登录后（例如跳转回首页或收到登录成功响应），执行以下 JS：
// 模拟登录成功后的操作（实际中可放在 login.js 或认证回调里）
function onUserLoggedIn() {
const menuList = document.querySelector('.menulist');
if (menuList) {
menuList.classList.add('logged'); // 启用其他菜单项
}
}
// 示例：页面加载后检查是否已登录（如 localStorage 中有 token）
document.addEventListener('DOMContentLoaded', () => {
const isLoggedIn = localStorage.getItem('authToken') !== null;
if (isLoggedIn) {
onUserLoggedIn();
}
});
你也可以在登录页 login.html 提交成功后，跳转时携带状态，或使用 sessionStorage/JWT 解析等方式判断——关键在于最终调用 classList.add('logged')。
✅ 进阶建议（可选）
-
语义化增强：为禁用状态添加
aria-disabled="true"和视觉灰度样式（如opacity: 0.6; pointer-events: none;），提升可访问性； -
平滑过渡：添加 CSS
transition: display 0.2s不生效（display不可动画），可用opacity+visibility替代； - 服务端渲染更安全：纯前端控制仅适用于原型或低敏感场景；生产环境建议服务端根据登录态输出不同 HTML，避免未授权用户通过 DevTools 手动删 class 绕过。
该方案简洁、无依赖、符合现代 Web 实践，特别适合初学者理解「关注点分离」——样式控制展示，JS 控制状态，HTML 保持结构纯净。
