0

我在这个标签中有一个“aside”标签我有一个“div”，它包含类似侧面菜单的东西。我希望此菜单仅在用户登录时显示。如果他不是，我希望在那里而不是菜单登录表单。如果创建了 php 会话，我知道如何通过 JavaScript 检查，但我不知道如何用其他代码替换所有代码。这是一个代码：

<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>

但这仅在我更改文本而不是替换标签时才有效。好吧，谢谢你的帮助。

4

2 回答 2

1

另一个想法可能是将其中的两个元素组合起来，#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();
 }
}
于 2012-09-08T12:08:21.640 回答
0

您也可以将菜单放在一个文件中，比如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");

顺便说一句，您可以对UL元素而不是整个side元素执行相同的操作，但更改 side 更好，因为如果不是您的 id（例如 *#side_menu_div*）将不是一个很好的参考。

于 2012-09-15T15:32:26.017 回答