logo标签列表

使用getElementsByClassName触发显示

javascripthtmlcss
3
我希望当用户点击“没有账户？”一行时，能够触发.registrybox类的显示。我已经编写了一些脚本，但它并没有起作用。脚本指定当“没有账户？”被点击时，.loginbox应该消失，并被.registrybox类代码替换。
这些CSS中的display:none和display:block是预先编写好的。 

function displayRegistry() {
  document.getElementsByClassName('.registrybox').style.display = "block";
  document.getElementsByClassName('.loginbox').style.display = "none";
}
.loginbox {
  width: 320px;
  height: 420px;
  background-color: ;
  color: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 50px 20px;
  display: block;
}


}
h1 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}
.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.loginbox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.loginbox a {
  text-decoration: none;
  color: darkgrey;
  font-size: 15px;
  line-height: 20px;
}
.loginbox a:hover {
  color: red;
}
.registrybox {
  width: 320px;
  height: 420px;
  color: #fff;
  top: 10%;
  left: 20%;
  position: absolute;
  transform: trnaslate(-50%, -50%);
}
.registrybox p {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.registrybox input {
  width: 100%;
  margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.registrybox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  color: #fff;
  background: #fb2525;
  font-size: 18px;
  border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.registrybox a {
  text-decoration: none;
  color: darkgrey;
  line-height: 20px;
  font-size: 15px;
}
.registrybox {
  display: none;
}
select {
  padding: 10px;
  border: none;
  border-radius: 10px;
}
<div class="loginbox">
  <h1>Login Here</h1>
  <form>
    <p>Username</p>
    <input type="text" name="" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="" placeholder="Enter Password">
    <input type="submit" name="" value="Login">
    <a href="#">Forgot password?</a><br>
    <a href="#" onclick="displayRegistry()">Dont have an account?</a>
  </form>
</div>
<div class="registrybox">
  <h1>Registration</h1>
  <form>
    <p>Username</p>
    <input type="text" placeholder="Enter Username">
    <p>E-mail</p>
    <input type="text" placeholder="Enter E-mail">
    <p>Password</p>
    <input type="password" placeholder="Enter password">
    <p>Repeat Password</p>
    <input type="password" placeholder="Confirm password">
    <input type="submit" value="Sign up">
    <a hred="#">Already registered?</a>
    <select name="dobmonth">
      <option>month</option>
      <option value="january">January</option>
    </select>
    <select name="dobyear">
      <option>Year</option>
      <option value="2000">2006</option>
      <option value="2000">2005</option>
      <option value="2000">2004</option>
      <option value="2000">2003</option>
      <option value="2000">2002</option>
      <option value="2000">2001</option>
      <option value="2000">2000</option>
      <option value="2000">1999</option>
    </select>
  </form>
</div>

4个回答
2
实际上，getElementsByClassName() 返回一个匹配类名的类数组对象，因此您需要使用 [0] 来获取元素... 此外，在使用 getElementsByClassName() 时，不需要使用 .。 

function displayRegistry() {
  document.getElementsByClassName('registrybox')[0].style.display = "block";
  document.getElementsByClassName('loginbox')[0].style.display = "none";
}
function displayLogin() {
  document.getElementsByClassName('registrybox')[0].style.display = "none";
  document.getElementsByClassName('loginbox')[0].style.display = "block";
}
.loginbox {
  width: 320px;
  height: 420px;
  background-color: ;
  color: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 50px 20px;
  display: block;
}


}
h1 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}
.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.loginbox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.loginbox a {
  text-decoration: none;
  color: darkgrey;
  font-size: 15px;
  line-height: 20px;
}
.loginbox a:hover {
  color: red;
}
.registrybox {
  width: 320px;
  height: 420px;
  color: #fff;
  top: 10%;
  left: 20%;
  position: absolute;
  transform: trnaslate(-50%, -50%);
}
.registrybox p {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.registrybox input {
  width: 100%;
  margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.registrybox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  color: #fff;
  background: #fb2525;
  font-size: 18px;
  border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.registrybox a {
  text-decoration: none;
  color: darkgrey;
  line-height: 20px;
  font-size: 15px;
}
.registrybox {
  display: none;
}
select {
  padding: 10px;
  border: none;
  border-radius: 10px;
}
<div class="loginbox">
  <h1>Login Here</h1>
  <form>
    <p>Username</p>
    <input type="text" name="" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="" placeholder="Enter Password">
    <input type="submit" name="" value="Login">
    <a href="#">Forgot password?</a><br>
    <a href="#" onclick="displayRegistry()">Dont have an account?</a>
  </form>
</div>
<div class="registrybox">
  <h1>Registration</h1>
  <form>
    <p>Username</p>
    <input type="text" placeholder="Enter Username">
    <p>E-mail</p>
    <input type="text" placeholder="Enter E-mail">
    <p>Password</p>
    <input type="password" placeholder="Enter password">
    <p>Repeat Password</p>
    <input type="password" placeholder="Confirm password">
    <input type="submit" value="Sign up">
    <a hred="#" onclick="displayLogin()">Already registered?</a>
    <select name="dobmonth">
      <option>month</option>
      <option value="january">January</option>
    </select>
    <select name="dobyear">
      <option>Year</option>
      <option value="2000">2006</option>
      <option value="2000">2005</option>
      <option value="2000">2004</option>
      <option value="2000">2003</option>
      <option value="2000">2002</option>
      <option value="2000">2001</option>
      <option value="2000">2000</option>
      <option value="2000">1999</option>
    </select>
  </form>
</div>

或者你可以使用 querySelector... 

function displayRegistry() {
  document.querySelector('.registrybox').style.display = "block";
  document.querySelector('.loginbox').style.display = "none";
}
.loginbox {
  width: 320px;
  height: 420px;
  background-color: ;
  color: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 50px 20px;
  display: block;
}


}
h1 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}
.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.loginbox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.loginbox a {
  text-decoration: none;
  color: darkgrey;
  font-size: 15px;
  line-height: 20px;
}
.loginbox a:hover {
  color: red;
}
.registrybox {
  width: 320px;
  height: 420px;
  color: #fff;
  top: 10%;
  left: 20%;
  position: absolute;
  transform: trnaslate(-50%, -50%);
}
.registrybox p {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.registrybox input {
  width: 100%;
  margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.registrybox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  color: #fff;
  background: #fb2525;
  font-size: 18px;
  border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.registrybox a {
  text-decoration: none;
  color: darkgrey;
  line-height: 20px;
  font-size: 15px;
}
.registrybox {
  display: none;
}
select {
  padding: 10px;
  border: none;
  border-radius: 10px;
}
<div class="loginbox">
  <h1>Login Here</h1>
  <form>
    <p>Username</p>
    <input type="text" name="" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="" placeholder="Enter Password">
    <input type="submit" name="" value="Login">
    <a href="#">Forgot password?</a><br>
    <a href="#" onclick="displayRegistry()">Dont have an account?</a>
  </form>
</div>
<div class="registrybox">
  <h1>Registration</h1>
  <form>
    <p>Username</p>
    <input type="text" placeholder="Enter Username">
    <p>E-mail</p>
    <input type="text" placeholder="Enter E-mail">
    <p>Password</p>
    <input type="password" placeholder="Enter password">
    <p>Repeat Password</p>
    <input type="password" placeholder="Confirm password">
    <input type="submit" value="Sign up">
    <a hred="#">Already registered?</a>
    <select name="dobmonth">
      <option>month</option>
      <option value="january">January</option>
    </select>
    <select name="dobyear">
      <option>Year</option>
      <option value="2000">2006</option>
      <option value="2000">2005</option>
      <option value="2000">2004</option>
      <option value="2000">2003</option>
      <option value="2000">2002</option>
      <option value="2000">2001</option>
      <option value="2000">2000</option>
      <option value="2000">1999</option>
    </select>
  </form>
</div>

这个方法可以解决问题，但我试着对注册表框中的“已经注册？”这一行使用相同的方法，但没有成功。你有什么想法如何解决这个问题吗？ - Alexander
我创建了另一个名为displayLogin的函数，并将onclick="displayLogin()代码添加到“已注册”行。只是重新使用了我为displayRegistry编写的代码，但效果相反（注册表单消失并被登录表单替换）。 - Alexander
0

你的JS代码中有一些错误。

  1. document.getElementsByClassName() 只需要类名，你在类名前面添加了 '.'，这是错误的。

  2. document.getElementsByClassName() 返回一个元素数组。在你的情况下，你需要从这个数组中选择第一个元素。所以你需要使用 [0] 来获取所需的值。

function displayRegistry() {
  document.getElementsByClassName('registrybox')[0].style.display = "block";
  document.getElementsByClassName('loginbox')[0].style.display = "none";
}
.loginbox {
  width: 320px;
  height: 420px;
  background-color: ;
  color: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 50px 20px;
  display: block;
}


}
h1 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}
.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.loginbox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.loginbox a {
  text-decoration: none;
  color: darkgrey;
  font-size: 15px;
  line-height: 20px;
}
.loginbox a:hover {
  color: red;
}
.registrybox {
  width: 320px;
  height: 420px;
  color: #fff;
  top: 10%;
  left: 20%;
  position: absolute;
  transform: trnaslate(-50%, -50%);
}
.registrybox p {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.registrybox input {
  width: 100%;
  margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.registrybox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  color: #fff;
  background: #fb2525;
  font-size: 18px;
  border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.registrybox a {
  text-decoration: none;
  color: darkgrey;
  line-height: 20px;
  font-size: 15px;
}
.registrybox {
  display: none;
}
select {
  padding: 10px;
  border: none;
  border-radius: 10px;
}
<div class="loginbox">

  <h1>Login Here</h1>
  <form>
    <p>Username</p>
    <input type="text" name="" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="" placeholder="Enter Password">
    <input type="submit" name="" value="Login">
    <a href="#">Forgot password?</a><br>
    <a href="#" onclick="displayRegistry()">Dont have an account?</a>
  </form>
</div>

<div class="registrybox">
  <h1>Registration</h1>
  <form>
    <p>Username</p>
    <input type="text" placeholder="Enter Username">
    <p>E-mail</p>
    <input type="text" placeholder="Enter E-mail">
    <p>Password</p>
    <input type="password" placeholder="Enter password">
    <p>Repeat Password</p>
    <input type="password" placeholder="Confirm password">
    <input type="submit" value="Sign up">
    <a hred="#">Already registered?</a>
    <select name="dobmonth">
                        <option>month</option>
                        <option value="january">January</option>
                    </select>
    <select name="dobyear">
                        <option>Year</option>
                        <option value="2000">2006</option>
                         <option value="2000">2005</option>
                          <option value="2000">2004</option>
                           <option value="2000">2003</option>
                            <option value="2000">2002</option>
                             <option value="2000">2001</option>
                              <option value="2000">2000</option>
                               <option value="2000">1999</option>
                    </select>
  </form>
</div>

0

试试这个。

function displayRegistry() {
  document.getElementsByClassName('registrybox')[0].style.display = "block";
  document.getElementsByClassName('loginbox')[0].style.display = "none";
}
.loginbox {
  width: 320px;
  height: 420px;
  background-color: ;
  color: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 50px 20px;
  display: block;
}


}
h1 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}
.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.loginbox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.loginbox a {
  text-decoration: none;
  color: darkgrey;
  font-size: 15px;
  line-height: 20px;
}
.loginbox a:hover {
  color: red;
}
.registrybox {
  width: 320px;
  height: 420px;
  color: #fff;
  top: 10%;
  left: 20%;
  position: absolute;
  transform: trnaslate(-50%, -50%);
}
.registrybox p {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.registrybox input {
  width: 100%;
  margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.registrybox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  color: #fff;
  background: #fb2525;
  font-size: 18px;
  border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.registrybox a {
  text-decoration: none;
  color: darkgrey;
  line-height: 20px;
  font-size: 15px;
}
.registrybox {
  display: none;
}
select {
  padding: 10px;
  border: none;
  border-radius: 10px;
}
<div class="loginbox">

  <h1>Login Here</h1>
  <form>
    <p>Username</p>
    <input type="text" name="" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="" placeholder="Enter Password">
    <input type="submit" name="" value="Login">
    <a href="#">Forgot password?</a><br>
    <a href="#" onclick="displayRegistry()">Dont have an account?</a>
  </form>
</div>

<div class="registrybox">
  <h1>Registration</h1>
  <form>
    <p>Username</p>
    <input type="text" placeholder="Enter Username">
    <p>E-mail</p>
    <input type="text" placeholder="Enter E-mail">
    <p>Password</p>
    <input type="password" placeholder="Enter password">
    <p>Repeat Password</p>
    <input type="password" placeholder="Confirm password">
    <input type="submit" value="Sign up">
    <a hred="#">Already registered?</a>
    <select name="dobmonth">
                        <option>month</option>
                        <option value="january">January</option>
                    </select>
    <select name="dobyear">
                        <option>Year</option>
                        <option value="2000">2006</option>
                         <option value="2000">2005</option>
                          <option value="2000">2004</option>
                           <option value="2000">2003</option>
                            <option value="2000">2002</option>
                             <option value="2000">2001</option>
                              <option value="2000">2000</option>
                               <option value="2000">1999</option>
                    </select>
  </form>
</div>

0

如果你想使用替代的 jquery，你可以使用这个。我不能在这里添加 jquery。

Fiddle 示例

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接