我正在尝试为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没有交互。我知道这是因为我在登录功能中发出了一个警告,只是在用户单击登录按钮时调用,但我没有回复。
我做的事情相当愚蠢吗?
由于
答案 0 :(得分: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();
});