gpt4 book ai didi

javascript - 使用JS隐藏div(简单)

转载 作者:行者123 更新时间:2023-12-03 10:47:07 29 4
gpt4 key购买 nike

嗨,所以我需要做的是最终让 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>

最佳答案

您在以下行有错误:

document.getElementByID// ID, D is in uppercase

应该是:

document.getElementById //Id, d is in lowercase

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

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

CSS

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

或与JavaScript

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

关于javascript - 使用JS隐藏div(简单),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28533524/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com