Question

点击＆＃34;创建帐户＆＃34;我试图让包含登录表单的div消失。然后我希望能够通过单击＆＃34;登录＆＃34;来反转该过程。使用Jquery在注册表上锚定。

我认为我正确地将Jquery和Js文件链接在一起。

<head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="script/jquery-3.1.1.js"></script>
  <script src="script/javascript.js"></script>
</head>

这里是新的HTML

  <div class="form">
    <form class="register-form">
      <input type="text" placeholder="name"/>
      <input type="password" placeholder="password"/>
      <input type="text" placeholder="email address"/>
      <button>create</button>
      <p class="message">Already registered? <a href="" class="signin">Sign In</a></p>
    </form>
    <form class="login-form">
      <input type="text" placeholder="username"/>
      <input type="password" placeholder="password"/>
      <button>login</button>
      <p class="message">Not registered? <a href="" class="create">Create an account</a></p>
    </form>
  </div>

这里是新的javascript.js

$(document).ready(function(){
  $('a.signin').on("click", function(e) {
     e.preventDefault();
     $('.register-form').fadeOut();
     $('.login-form').fadeIn();
  });

  $('a.create').on("click", function(e) {
     e.preventDefault();
     $('.login-form').fadeOut();
     $('.register-form').fadeIn();
  });
)};

点击锚点并没有任何作用。

非常感谢任何帮助，提前谢谢！

Answer 1

将HTML更改为此（我已为每个锚添加了一个类）。

<div class="form">
    <form class="register-form">
      <input type="text" placeholder="name"/>
      <input type="password" placeholder="password"/>
      <input type="text" placeholder="email address"/>
      <button>create</button>
      <p class="message">Already registered? <a href="#" class="signin">Sign In</a></p>
    </form>
    <form class="login-form">
      <input type="text" placeholder="username"/>
      <input type="password" placeholder="password"/>
      <button>login</button>
      <p class="message">Not registered? <a href="#" class="create">Create an account</a></p>
    </form>
  </div>

然后将你的jQuery替换为...

$('a.signin').on("click", function(e) {
   e.preventDefault();
   $('.register-form').fadeOut();
   $('.login-form').fadeIn();
});

$('a.create').on("click", function(e) {
   e.preventDefault();
   $('.login-form').fadeOut();
   $('.register-form').fadeIn();
});

在jQuery中使用.on()函数。这对于点击等等事件来说要好得多。

Answer 2

你可以简单地使用

.hide()

或

$('form').animate({"opacity": "toggle"}, "slow");

但你也可以使用这个技巧：只需添加到您的CSS表单 .form {transition: opacity .3s ease} 并只是改变形式的不透明度：

$('form').css("opacity","0");

Answer 3

好的，我猜我忘了使用$(document).ready(function)，然后在我的javascript.js的最后发出语法错误，因为我写了)};而不是});

非常感谢！

Answer 4

将html正确链接到jquery和javascript后，以上代码将按预期切换。

在您的css文件中添加以下代码，以在首次启动网页时隐藏“注册”表单。

.register-form { display: none; }

Jquery不透明度切换

4 个答案: