您的位置：首页 > Web前端 > BootStrap

BootStrap导航栏（导航栏元素登录、退出登录等控制显示）

2018-02-28 16:50 459 查看

关于使用bootstrap导航栏以及控制登录等导航栏元素
HTML代码：<body onload='init()'>

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top"
role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="<%=path%>/qiantai/default.jsp">LOGO</a>
</div>
<ul class="nav navbar-nav">
<li><A href="#">网站首页</A></li>
<li><A href="#">导航栏元素</A></li>
<li><A href="#" onclick="">导航栏元素B</A></li>
<li><A href="#" onclick="">导航栏元素C</A></li>
<li><A href="#">导航栏元素D</A></li>
<li><A href="<%=path%>/zhaopin_all_jiuye.action">导航栏元素E</A></li>
<form class="navbar-form navbar-left" role="search" id="searchForm"
action="<%=path%>/zhaopinSearch.action" method="post">
<div class="form-group">
<input type="text" class="form-control" name="zhiwei"
placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>

<li><a target="_blank" href="#">管理员登录</a></li>
<li id="login"><A href="#" onclick="loginpage()">登录</A></li>
<li id="register"><A href="#" onclick="init()">注册</A></li>
<li id="center"><A href="#" onclick="enterCenter()">个人中心</A></li>
<li id="exit"><a href="#">安全退出</a></li>
</ul>

</div>
</nav>

</body>

JS代码：

function init(){
var user = "<%=session.getAttribute("user")%>";
if(user=="null"){
var center=document.getElementById("center");
var exit = document.getElementById("exit");
center.style.display='none';
exit.style.display='none';
}else{
var register=document.getElementById("register");
var login=document.getElementById("login");
register.style.display='none';
login.style.display='none';
}
}

init()在页面加载时调用，根据session来判断是否登录，如果已登录，则隐藏登录和注册两个导航栏元素，显示个人中心以及安全退出。反之，则隐藏个人中心和安全退出，显示登录及注册。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap

相关文章推荐

新的分享

章节导航