使用html中的链接调用JS函数

Question

我想设置我的 div 样式，如果我调用 sign up，sign in 会隐藏，反之亦然。我已经编写了这个 JS 代码，但是我无法调用这些函数来应用上述场景。碰巧的是，两个 div 同时出现在窗口上，这是不可取的。我应该怎么做，每当我按下 Sign In 链接时，注册 div 会隐藏，同样，当我点击 create new account ，登录 div 隐藏。

$(document).ready(function() {
  $("#signIn").click(function() {
    $(".signUpHide").hide(600);
    $(".signInShow").show(600);
    $(this).hide();
    $("#signUp").show();
  });
});

$(document).ready(function() {
  $("#signUp").click(function() {
    $(".signInHide").hide(600);
    $(".signUpShow").show(600);
    $(this).hide();
    $("#signIn").show();
  });
});

body {
  height: 100vh;
  width: 208vh;
}

.leftPanel {
  background-color: #660033;
  width: 70%;
  height: 100%;
  float: left;
  position: absolute;
}

.rightPanel {
  background-color: white;
  width: 30%;
  height: 100%;
  float: right;
}

.signInClass {}

.signInHide {}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rightPanel">
  <div class="container">
    <div class="row" style="margin-top: 30px">
      <label class="col-md-3"></label>
    </div>

    <div class="signUpHide signUpShow">
      <div class="row" style="margin-top: 30px">
        <label class="col-md-2"></label>
        <h1 class="col-md-10"><a name="SignUp">Sign Up</a></h1>
        <label class="col-md-2"></label>
        <label>or <a href="#SignIn">sign in</a> to your account</label>
      </div>

      <form action="bbSignUp.php" method="post">

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <input type="text" class="form-control col-md-8" placeholder="Username" name="user-name">
          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <input type="email" class="form-control col-md-8" placeholder="Email" name="e-mail" required="true">
          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <input type="password" class="form-control col-md-8" placeholder="Password" name="pass-word" required="true">
          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <label class="col-md-8" style="font-size: 11px">This page is protected by reCAPTCHA, and subject to the Google Privacy Policy and Terms of service.</label>
          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="defaultUnchecked" onchange="document.getElementById('signUpButton').disabled = !this.checked;">
            <label class="custom-control-label" for="defaultUnchecked">I agree to the Terms and Conditions</label>
          </div>

          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <button type="submit" class="btn btn-primary btn-block col-md-8" name="signUpButton" id="signUpButton" disabled="true">Sign Up</button>
          <label class="col-md-2"></label>

        </div>
      </form>
    </div>

    <div class="signInShow signInHide">

      <div class="row" style="margin-top: 30px">
        <label class="col-md-2"></label>
        <h1 class="col-md-10"><a name="SignIn">Sign In</a></h1>
        <label class="col-md-2"></label>
        <label>or <a href="#SignUp">create an account</a></label>
      </div>

      <form action="bbSignIn.php" method="post">

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <input type="email" class="form-control col-md-8" placeholder="Email" name="e-mail1" required="true">
          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <input type="password" class="form-control col-md-8" placeholder="Password" name="pass-word1" required="true">
          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <label class="col-md-8" style="font-size: 11px">This page is protected by reCAPTCHA, and subject to the Google Privacy Policy and Terms of service.</label>
          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="defaultUnchecked1" onchange="document.getElementById('signInButton').disabled = !this.checked;">
            <label class="custom-control-label" for="defaultUnchecked1">I agree to the Dropbox Terms</label>
          </div>

          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <button type="submit" class="btn btn-primary btn-block col-md-8" name="signInButton" id="signInButton" disabled="true">Sign In</button>
          <label class="col-md-2"></label>
        </div>
      </form>
    </div>
  </div>
</div>

Answer 1

首先，可以将代码重构为单个document.ready，您可以使用toggle() 到show/hide 元素。其次，id的用法需要固定为id="SignIn"而不是href="#SignIn"

$(document).ready(function() {
  $("#signIn,#signUp").click(function() {
    $(".signIn, .signUp").toggle();
  });
});

height: 100vh;
width: 208vh;

}
.leftPanel {
  background-color: #660033;
  width: 70%;
  height: 100%;
  float: left;
  position: absolute;
}
.rightPanel {
  background-color: white;
  width: 30%;
  height: 100%;
  float: right;
}
.signInClass {}
.signInHide {}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="rightPanel">
  <div class="container">
    <div class="row" style="margin-top: 30px">
      <label class="col-md-3"></label>
    </div>

    <div class="signUp" style="display:none;">
      <div class="row" style="margin-top: 30px">
        <label class="col-md-2"></label>
        <h1 class="col-md-10"><a name="SignUp">Sign Up</a></h1>
        <label class="col-md-2"></label>
        <label>or <a href="#" id="signUp">sign in</a> to your account</label>
      </div>

      <form action="bbSignUp.php" method="post">

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <input type="text" class="form-control col-md-8" placeholder="Username" name="user-name">
          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <input type="email" class="form-control col-md-8" placeholder="Email" name="e-mail" required="true">
          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <input type="password" class="form-control col-md-8" placeholder="Password" name="pass-word" required="true">
          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <label class="col-md-8" style="font-size: 11px">This page is protected by reCAPTCHA, and subject to the Google Privacy Policy and Terms of service.</label>
          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="defaultUnchecked" onchange="document.getElementById('signUpButton').disabled = !this.checked;">
            <label class="custom-control-label" for="defaultUnchecked">I agree to the Terms and Conditions</label>
          </div>

          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <button type="submit" class="btn btn-primary btn-block col-md-8" name="signUpButton" id="signUpButton" disabled="true">Sign Up</button>
          <label class="col-md-2"></label>

        </div>
      </form>
    </div>

    <div class="signIn">

      <div class="row" style="margin-top: 30px">
        <label class="col-md-2"></label>
        <h1 class="col-md-10"><a name="SignIn">Sign In</a></h1>
        <label class="col-md-2"></label>
        <label>or <a href="#" id="signIn">create an account</a></label>
      </div>

      <form action="bbSignIn.php" method="post">

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <input type="email" class="form-control col-md-8" placeholder="Email" name="e-mail1" required="true">
          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <input type="password" class="form-control col-md-8" placeholder="Password" name="pass-word1" required="true">
          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <label class="col-md-8" style="font-size: 11px">This page is protected by reCAPTCHA, and subject to the Google Privacy Policy and Terms of service.</label>
          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="defaultUnchecked1" onchange="document.getElementById('signInButton').disabled = !this.checked;">
            <label class="custom-control-label" for="defaultUnchecked1">I agree to the Dropbox Terms</label>
          </div>

          <label class="col-md-2"></label>
        </div>

        <div class="row" style="margin-top: 20px">
          <label class="col-md-2"></label>
          <button type="submit" class="btn btn-primary btn-block col-md-8" name="signInButton" id="signInButton" disabled="true">Sign In</button>
          <label class="col-md-2"></label>
        </div>
      </form>
    </div>
  </div>
</div>