0

我正在尝试为 html5/js 游戏即时编程创建登录/注册系统/菜单。

目前，我已经设置了带有不同 div 的 html 页面，这些 div 将用于菜单。

<!DOCTYPE html>
<html>
<head>
<title>TBG basic structure</title>
<script src="JS/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="JS/game.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
</head>
<body>
<section id="wrapper">
<header>
    <h1><img src="images/title.png" width="467" height="184"/></h1>

</header>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Leagues</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
<article id="container">
    <div id="load-new">
        <p>LOAD/NEW</p>
    </div>
    <div id="reg">
        <p>REGISTER</p>
    </div>
    <div id="login">
        <p>LOGIN</p>
    </div>
    <div id="access">
        <p>ACCESS</p>
        <button id="login-but" onclick="login2()">Login</button>
        <button id="reg-but" onclick="register()">Register</button>
    </div>
    <canvas id="TBG" width="640" height="416">
        Please use a more up to date browser
    </canvas>
    <div id="GUI">
        <div id="health">
            <p><img src="images/heart.png"/>: <span class="gameHealth"></span></p>
            </div>
        <div id="energy">
            <p><img src="images/energy.png"/>: <span class="gameEnergy"></span></p>
        </div>
        <div id="table_container"></div>
    </div>
</article>

</section>
</body>
</html>

基本上，由于用户的决定，我想使用 javascript/jquery 隐藏显示菜单的正确部分。

因此，用户将看到的第一个 div 是访问 div，它将为用户提供 2 个选项，“登录”或“注册”，正如您在上面访问 div 中的按钮所看到的那样。

基本上我希望我的 JS 在按下其中一个按钮时隐藏访问 div，然后根据用户按下的按钮显示登录 div 或 reg div。

这是我目前拥有的Js：

$(document).ready(function(){

var loadScr = $("#load-new");
var regScr = $("#reg");
var loginScr = $("#login");
var accessScr = $("#access");

    loadScr.hide();
    regScr.hide();
    loginScr.hide();

    function login()
    {
        accessScr.hide();
        loginScr.show();
    }

    function register()
    {
        accessScr.hide();
        regScr.show();
    }

});

似乎按钮的 onclick 功能没有与 JS 交互。我知道这一点，因为我在登录功能中放置了一个警报，该警报在用户单击登录按钮时调用，但我没有回复。

我在做一些相当愚蠢的事情吗？

谢谢

4

1 回答 1

1

您应该做的第一件事是添加type="button"到您的<button>元素中。您的页面可能正在重新加载，因为某些浏览器将<button>元素视为type="submit"默认值。此外，“-”在您的属性中不是有效字符id，因此我将其替换为“_”。

<button id="login_but" type="button">Login</button>
<button id="reg_but" type="button">Register</button>

我还onclick从您的按钮中删除了属性，因为以编程方式分配点击事件会更好（一种“不引人注目的”JavaScript 技术）。接下来，我会将这两个函数从文档中移出，并忘记保留对元素的引用。在 jQuery 中使用 ID 选择器非常快。您的 JS 现在应该如下所示：

function login()
{
    $('#access').hide();
    $('#login').show();
}

function register()
{
    $('#access').hide();
    $('#reg').show();
}

$(function() {

    $('#login_but').click(login);
    $('#reg_but').click(register);

    $('#load-new').hide();
    $('#reg').hide();
    $('#login').hide();

});
于 2013-03-07T16:17:26.277 回答