Question

您好我需要做的是最终有一个基于点击事件的regStart和regPage备用可见性，我不是太担心编写JavaScript函数但我根本无法让我的regPage首先隐藏起来。这是我的代码。简单的答案请我是JS的新手。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">`enter code here`
<head>
<title>SuperSite</title>
<script language="JavaScript" type="text/javascript" >

    function setVisibility() {
        document.getElementByID('regStart').style.visibility = 'visibile';
        document.getElementByID('regPage').style.visibility = 'hidden';
    };
</script>
</head>
<body onload=setVisibility();>

    <div>
        <h1>SuperSite</h1>
        <hr />
        <p>Already a registered SuperSite user? Sign in with one of the following services.</p>
        <div class="icons">
            <img alt="facebook" src="/images/js project/FacebookDepressed.ico" />
            <img alt="google" src="/images/js project/GoogleDepressed.ico" />
            <img alt="Windows Live" src="/images/js project/WinLiveDepressed.ico" />
            <img alt="Yahoo!" src="/images/js project/YahooDepressed.ico" />
        </div>
        <ul>
            <li>sign in with your SuperSite username and password</li>
            <li>add another authentication service from the list above</li>
            <li>change your SuperSite password</li>
        </ul>
        <div id="regStart">
            <p>If you haven't already registered with SuperSite</p>
            <a id="regNow" href="">Register Now</a>
        </div>

        <div id="regPage">
            <p>Register to use SuperSite services with the following form:</p>
            <p>UserName:</p>
            <input id="UserName" type="text" />
            <p>Password:</p>
            <input id="Password1" type="password" />
            <p>Verify Password:</p>
            <input id="PasswordVerify" type="password" />
        </div>
    </div>
</body>
</html>

Answer 1

你在行上有错误：

document.getElementByID// ID, D is in uppercase

应该是：

document.getElementById //Id, d is in lowercase

由于您使用了可见性，即使隐藏了div，该空间也会被占用。

您可以使用样式的显示属性来删除这些空格。

CSS

#regStart{display:block;}
#regPage{display:none;}

或 JavaScript

function setVisibility() {
    document.getElementById('regStart').style.display = 'block';
    document.getElementById('regPage').style.display = 'none';
}

Answer 2

//检查链接：http://www.w3schools.com/jsref/prop_style_display.asp

<body onload="setVisibility()">

    <script language="JavaScript" type="text/javascript">
        function setVisibility() {
            document.getElementById('regStart').style.display = 'initial'; 
            document.getElementById('regPage').style.display = 'hidden';

        };
    </script>

    <div>
         <h1>SuperSite</h1>

        <hr />
        <p>Already a registered SuperSite user? Sign in with one of the following services.</p>
        <div class="icons">
            <img alt="facebook" src="/images/js project/FacebookDepressed.ico" />
            <img alt="google" src="/images/js project/GoogleDepressed.ico" />
            <img alt="Windows Live" src="/images/js project/WinLiveDepressed.ico" />
            <img alt="Yahoo!" src="/images/js project/YahooDepressed.ico" />
        </div>
        <ul>
            <li>sign in with your SuperSite username and password</li>
            <li>add another authentication service from the list above</li>
            <li>change your SuperSite password</li>
        </ul>
        <div id="regStart">
            <p>If you haven't already registered with SuperSite</p> <a id="regNow" href="">Register Now</a>

        </div>
        <div id="regPage">
            <p>Register to use SuperSite services with the following form:</p>
            <p>UserName:</p>
            <input id="UserName" type="text" />
            <p>Password:</p>
            <input id="Password1" type="password" />
            <p>Verify Password:</p>
            <input id="PasswordVerify" type="password" />
        </div>
    </div>

    </html>

使用JS隐藏Div（简单）

2 个答案: