我在这个标签中有一个"aside"标签,我有一个类似于侧菜单的"div"。我希望这个菜单只在用户登录时显示。如果他没有登录,我希望有一个登录表单,而不是菜单。我知道如何通过JavaScript检查php会话是否已创建,但我不知道如何用其他代码替换所有代码。这是一个代码:
<aside id="main_section_right">
<div id="side_menu_div">
<ul id="account_menu">
<li class="current"><a href="#">Account</a></li>
<li><a href="#">Edit Account</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
</aside>
现在,若用户并没有登录,我希望"ul"标记中的代码改为这个。
<form>
<li><input type="text" class="form" id="username" name="usr"/></li>
<li><input type="text" class="form" id="password" name="paw"/></li>
<li>
<button type="submit" class="login_button" id="login_button">
<b>Login</b>
</button>
</li>
</form>
有什么方法可以用jQuery或JavaScript实现它吗?所以这一切看起来像这样:
<script type="text/javascript">
if (logged_in) {
document.getElementById("side_menu_div").innerHTML =
} else {
document.getElementById("side_menu_div").innerHTML =
}
</script>
但只有当我更改文本而不是替换标签时,这才有效。谢谢你的帮助。
另一个想法可能是将#side_menu_div
中的两个元素组合起来,并根据登录状态切换它们的可见性。看到这个jsfiddle
<div id="side_menu_div">
<div id="loggedin">
<ul id="account_menu">
<li class="current"><a href="#">Account</a></li>
<li><a href="#">Edit Account</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
<div id="notloggedid" class="chklogin">
<form>
<ul>
<li><input type="text" class="form" id="username" name="usr"/></li>
<li><input type="text" class="form" id="password" name="paw"/></li>
<li><button type="submit" class="login_button" id="login_button">
<b>Login</b></button></li>
</ul>
</form>
</div>
</div>
切换显示的功能:
function _setMenu(loginstatus){
if (loginstatus){
$('#loggedin').show();
$('#notloggedin').hide();
} else {
$('#loggedin').hide();
$('#notloggedin').show();
}
}
您也可以将菜单放在一个文件中,例如menu.html,并将表单放在另一个文件form.html.中
var isLogged; // This variable shoud be a boolean indicating if the user is logged
if (isLogged) $("#main_section_right").load("menu.html");
else $("#main_section_right").load("form.html");
顺便说一句,您可以对ULelment执行同样的操作,而不是整个aside元素,但更改aside更好,因为如果不更改,您的id(例如*#side_enu_div*)将不是一个很好的参考。