使用JavaScript根据登录状态控制导航栏元素的显示与隐藏

核心逻辑 #

根据用户登录状态切换指定导航项的可见性：

• 已登录：显示.nav-item-3，隐藏.nav-item-4
• 未登录：隐藏.nav-item-3，显示.nav-item-4

原生JavaScript实现方案 #

基础版（直接控制DOM样式）

// 获取目标导航元素
const navItem3 = document.querySelector('.nav-item-3');
const navItem4 = document.querySelector('.nav-item-4');

// 读取登录状态（实际项目中需替换为真实逻辑：从localStorage、后端接口或全局状态获取）
function getLoginStatus() {
    return localStorage.getItem('isLoggedIn') === 'true';
}

// 根据状态更新导航可见性
function updateNavVisibility() {
    const isLoggedIn = getLoginStatus();
    
    // 注意：这里的display值需匹配导航项默认样式（比如flex/inline-block）
    navItem3.style.display = isLoggedIn ? 'block' : 'none';
    navItem4.style.display = isLoggedIn ? 'none' : 'block';
}

// 页面加载时初始化状态
updateNavVisibility();

// 监听登录/登出操作，实时更新导航
document.querySelector('#login-btn')?.addEventListener('click', () => {
    localStorage.setItem('isLoggedIn', 'true');
    updateNavVisibility();
});

document.querySelector('#logout-btn')?.addEventListener('click', () => {
    localStorage.removeItem('isLoggedIn');
    updateNavVisibility();
});

优化版（用CSS类控制，更灵活）

先在CSS中定义隐藏类：

.hidden {
    display: none !important;
}

再用类操作替代直接修改style：

const navItem3 = document.querySelector('.nav-item-3');
const navItem4 = document.querySelector('.nav-item-4');

function getLoginStatus() {
    return localStorage.getItem('isLoggedIn') === 'true';
}

function updateNavVisibility() {
    const isLoggedIn = getLoginStatus();
    
    // 用toggle方法自动切换类：第二个参数为true时添加类，false时移除
    navItem3.classList.toggle('hidden', !isLoggedIn);
    navItem4.classList.toggle('hidden', isLoggedIn);
}

// 初始化+监听操作
updateNavVisibility();
document.querySelector('#login-btn')?.addEventListener('click', () => {
    localStorage.setItem('isLoggedIn', 'true');
    updateNavVisibility();
});
document.querySelector('#logout-btn')?.addEventListener('click', () => {
    localStorage.removeItem('isLoggedIn');
    updateNavVisibility();
});

框架适配提示（可选） #

如果使用React/Vue等框架，可结合框架状态管理实现条件渲染：

• React示例：

import { useState, useEffect } from 'react';

function Navbar() {
    const [isLoggedIn, setIsLoggedIn] = useState(localStorage.getItem('isLoggedIn') === 'true');

    useEffect(() => {
        localStorage.setItem('isLoggedIn', isLoggedIn);
    }, [isLoggedIn]);

    return (
        <nav>
            {/* 其他导航项 */}
            {isLoggedIn && <div className="nav-item-3">用户中心</div>}
            {!isLoggedIn && <div className="nav-item-4">登录/注册</div>}
        </nav>
    );
}

• Vue示例：

<template>
    <nav>
        <!-- 其他导航项 -->
        <div class="nav-item-3" v-show="isLoggedIn">用户中心</div>
        <div class="nav-item-4" v-show="!isLoggedIn">登录/注册</div>
    </nav>
</template>

<script>
export default {
    data() {
        return {
            isLoggedIn: localStorage.getItem('isLoggedIn') === 'true'
        }
    },
    watch: {
        isLoggedIn(newVal) {
            localStorage.setItem('isLoggedIn', newVal);
        }
    }
}
</script>

内容的提问来源于stack exchange，提问作者Rumeysa Gelgi