Javascript隱藏/顯示功能

Question

我正在嘗試為html5 / js游戲im編程創建登錄/注冊系統/菜單。

目前，我已經將菜單設置為不同的div設置了html頁面。

<!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，該訪問div將為用戶提供2個選項，即“登錄”或“注冊”，如您在上面的訪問div中的按鈕所看到的那樣。

基本上，我希望我的JS在按下其中一個按鈕時隱藏訪問div，然后根據用戶按下的按鈕顯示登錄div或reg div。

這是我目前擁有的J：

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

您應該做的第一件事是在您的<button>元素中添加type="button" 。 您的頁面可能正在重新加載，因為某些瀏覽器默認將<button>元素視為type="submit" 。 另外，“-”在您的id屬性中不是有效字符，因此我已將其替換為“ _”。

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

我還從按鈕中刪除了onclick屬性，因為最好以編程方式分配click事件（一種“不引人注意”的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 個解決方案

解決方案1
1 已采納 2013-03-07 16:17:26

Javascript隱藏/顯示功能

問題描述

1 個解決方案

解決方案1 1 已采納 2013-03-07 16:17:26

解決方案1
1 已采納 2013-03-07 16:17:26