在登录状态时隐藏登录和注册按钮

最新推荐文章于 2021-03-27 20:20:26 发布

Ysdo

最新推荐文章于 2021-03-27 20:20:26 发布

阅读量6.7k

点赞数 4

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_42183409/article/details/104920714

版权

JQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种基于前端技术的用户登录状态显示切换方法，利用JS判断session中用户数据，实现登录|注册按钮与用户名组件的显示隐藏功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

具体思路：

用户进入首页，此时是未登录状态，则显示登陆|注册按钮，登陆以后则显示用户名。

我们可以使用控件显示隐藏来实现，先判断当前session中是否有用户数据，如果有数据我们将登陆|注册按钮进行隐藏，如果没有数据则将用户名等组件隐藏。

实现代码：

登陆注册组件，注意该组件id ‘logAndReg’

<ul class="loginTop" id="logAndReg">
            	<li><a href="login.jsp" rel="nofollow">登录</a></li>
            	<li>|</li>
            	<li><a href="register.jsp" rel="nofollow">注册</a></li>
</ul>

用户登录状态组件，id为 ‘users’，除了当前整个组件id 我们还应给用户名的span起一个id来记录当前span中是否有用户数据（我使用的security安全框架从session中获取的用户名）

<dl class="collapsible_menu" id="users">
				<dt>
					<span id="uname" >
<security:authentication property="principal.username"/>
                    </span>
					<span class="red dn" id="noticeDot-0"></span>
					<i></i>
				</dt>
				<dd><a rel="nofollow" href="jianli.jsp">我的简历</a></dd>
				<dd><a href="collections.html">我收藏的职位</a></dd>
				<dd class="btm"><a href="subscribe.html">我的订阅</a></dd>
				<dd><a href="create.jsp">我要招人</a></dd>
				<dd><a href="accountBind.html">帐号设置</a></dd>
				<dd class="logout"><a rel="nofollow"             href="${pageContext.request.contextPath}/logout.do">退出</a></dd>
			</dl>

通过js实现来具体隐藏

<%--未登陆时显示登陆 登陆时显示用户--%>
<script type="text/javascript" >
	window.onload=	function ()
	{
		 var u1 =document.getElementById("logAndReg");//获取登录注册组件id
		var u2 =document.getElementById("users");//获取用户信息组件id


		var spans = $("#uname").html();//获取span的数据

		if (spans !='')//判断当前span数据是否为空
		{
			u1.style.visibility="hidden";//数据不为空则隐藏登录注册组件
		}else{
			u2.style.visibility="hidden";//数据为空则隐藏用户信息组件
		}

	}