Jquery不透明トグル

「アカウントを作成」アンカーをクリックするとログインフォームを含むdivを取得しようとしていますが、その上で「サインイン」アンカーをクリックしてプロセスを元に戻したいと考えています。 Jqueryを使用した登録フォーム。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(); 
    }); 
)};

クリックすると、途中で何もしないだのです。

ご協力いただきまして、ありがとうございます。は、単にあなたのCSSフォーム .form {transition: opacity .3s ease} に追加するだけの不透明度を変更します。

出典

2017-03-10 Téo ORIOL

は（私は各アンカーにクラスを追加しました）これにあなたの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で.on()関数を使用し

$('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を交換してください。私は)};を書いたので、それは、上のクリックなどのようなイベント

出典

2017-03-10 13:28:18

これはやり方のようですが、Chromeではうまく動作しない、または正しく表示されないようです。私はXAMPPを使用していますが、.phpファイルがインデックスです。クロムで検査するとエラーはなく、jquery.jsとjavascript.jsの両方がソースメニューにあります。私の設定で何かが間違っていたり、何かが逃したかもしれません –

コンソールに何かエラーがありますか？何がうまくいかないの？ –

いいえ、Chromeのコンソールにエラーはなく、「」をクリックしても何も起こりません。ただし、URLの＃は例外ですが、それは正常です。 –