Question

我正在使用jQuery和materializecss来设计我的登录门户。我想在登录页面上实现隐藏和显示功能，当用户点击注册按钮登录div将隐藏并注册div将显示但我收到一些错误。我需要帮助。这是我的代码：

<html>
 <head>
  <title>  Login Portal </title>
  <link rel="stylesheet" href="css/materializecss.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="css/animate.css">
  <script src="js/wow.min.js"></script>
         <script>
         new WOW().init();
         </script>
         <style>
          .btn-login{
            padding: 5px 5px 20px 5px !important;
          }
          .back-icon{
            padding: 15px 10px 10px 10px;
            z-index: 1;
          }
         </style>

         <script src="js/jquery.min.js"></script>
      <script src="js/materializecss.min.js"></script>
   </head>
  <body>
    <div class="back-icon">
      <a href="index.php" > <img src="images/back1.png"> </a>
    </div>
  <div class="row">
    <h3 class="center light-blue-text">  <img src="images/logo.png"> </h3>
    <div class="col s3">
    </div>
    <div class="col s6" id="login" >
      <form style="box-shadow: 1px 2px 6px 2px #ccc;">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">account_circle</i>
          <input id="icon_prefix" type="text" class="validate">
          <label for="icon_prefix">Email Id</label>
        </div>
        <div class="input-field col s12">
          <i class="material-icons prefix">vpn_key</i>
          <input id="icon_telephone" type="tel" class="validate">
          <label for="icon_telephone">Password</label>
        </div>
        <div class="input-field col s12 center btn-login">
              <button class="btn waves-effect waves-light light-blue"  type="submit" name="action">Submit
                <i class="material-icons right">send</i>
              </button>
        </div>
        <div class="col s12 input-field">
          <div class="col s4 left">
            <button id="forgetpassword-button"> Forget Passoword ? </button>
          </div>
          <div class="col s4">
          </div>
          <div class="col s2 right">
            <button id="signup-button"> Sign Up </button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="col s6" id="signup" style="display:none">
    <form style="box-shadow: 1px 2px 6px 2px #ccc;">
    <div class="row">
      <div class="input-field col s12">
        <i class="material-icons prefix">account_circle</i>
        <input id="icon_prefix" type="text" class="validate">
        <label for="icon_prefix">Email Id</label>
      </div>
      <div class="input-field col s12">
        <i class="material-icons prefix">vpn_key</i>
        <input id="icon_telephone" type="tel" class="validate">
        <label for="icon_telephone">Password</label>
      </div>
      <div class="input-field col s12 center btn-login">
            <button class="btn waves-effect waves-light light-blue" type="submit"  name="action">Submit
              <i class="material-icons right">send</i>
            </button>
      </div>
      <div class="col s12 input-field">
        <div class="col s4 left">
          <a href="" id="forgetpassword-button"> Forget Passoword ? </a>
        </div>
        <div class="col s4">
        </div>
        <div class="col s2 right">
          <a href="" id="login-button"> Sign In </a>
        </div>
      </div>
    </div>
  </form>
</div>
<div class="col s6" id="forgetpassword"  style="display:none">
  <form style="box-shadow: 1px 2px 6px 2px #ccc;">
  <div class="row">
    <div class="input-field col s12">
      <i class="material-icons prefix">account_circle</i>
      <input id="icon_prefix" type="text" class="validate">
      <label for="icon_prefix">Email Id</label>
    </div>
    <div class="input-field col s12">
      <i class="material-icons prefix">vpn_key</i>
      <input id="icon_telephone" type="tel" class="validate">
      <label for="icon_telephone">Password</label>
    </div>
    <div class="input-field col s12 center btn-login">
          <button class="btn waves-effect waves-light light-blue"  type="submit" name="action">Submit
            <i class="material-icons right">send</i>
          </button>
    </div>
    <div class="col s12 input-field">
      <div class="col s4 left">
        <a href="" id="login-button"> Sign In </a>
      </div>
      <div class="col s4">
      </div>
      <div class="col s2 right">
        <a href="" id="signup-button"> Sign Up </a>
      </div>
    </div>
  </div>
    </form>
     </div>
         <div class="col s3">
           </div>
        </div>
    <script>
      $(document).ready(function(){
        $("#login-button").click(function(){
        $("#login").show();
        $("#signup").hide();
   $("#forgetpassword").hide();
  });
 $("#signup-button").click(function(){
   $("#login").hide();
   $("#signup").show();
   $("#forgetpassword").hide();
  });
  $("#forgetpassword-button").click(function(){
   $("#login").hide();
   $("#signup").hide();
    $("#forgetpassword").show();
  });
  });
 </script>
    </body>
     </html>

Answer 1

您需要添加e.preventDefault();以防止点击链接的默认行为。您的JS代码应如下所示：

$(document).ready(function(){
    $("#login-button").click(function(e){
        e.preventDefault();
        $("#login").show();
        $("#signup").hide();
        $("#forgetpassword").hide();
    });
    $("#signup-button").click(function(e){
        e.preventDefault();
        $("#login").hide();
        $("#signup").show();
        $("#forgetpassword").hide();
    });
    $("#forgetpassword-button").click(function(e){
        e.preventDefault();
        $("#login").hide();
        $("#signup").hide();
        $("#forgetpassword").show();
    });
});

修改 id只能在html页面中使用一次，对您的元素使用class而不是id，并按如下方式更新您的JS代码：

$(document).ready(function(){ $(".login-button").click(function(e){ e.preventDefault(); $("#signup").hide(); $("#forgetpassword").hide(); $("#login").show(); }); $(".signup-button").click(function(e){ e.preventDefault(); $("#login").hide(); $("#forgetpassword").hide(); $("#signup").show(); }); $(".forgetpassword-button").click(function(e){ e.preventDefault(); $("#login").hide(); $("#signup").hide(); $("#forgetpassword").show(); }); });

在jquery隐藏和显示函数中获取错误

1 个答案: