Question

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

目前我已经设置了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没有交互。我知道这是因为我在登录功能中发出了一个警告，只是在用户单击登录按钮时调用，但我没有回复。

我做的事情相当愚蠢吗？

由于

Answer 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();

});

Javascript隐藏/显示功能

1 个答案: