0

私は次のページで作業しています：http： //mockingbirdagency.com/thebox/bettercss/login-1.html そして最初のサインアップボックスの右側が一度だけ表示されるようにしたいと思います「あなたのメールアドレスで登録してください」をクリックします。

私はJavascriptをほとんど知りませんが、それを行うために必要なことだと思います。誰かが私にチュートリアルを教えてもらえますか？

乾杯

（編集：私がリンクを求めている理由は、Googleで何を探すべきかわからないからです）

4

3 に答える 3

2

idこれらの 2 つの要素に を追加すると仮定します。

<div class="form-step-1-container" id="myForm"> <!-- <-- ID here -->
    <h1>Register with your email address</h1>
    <div style="display:none;" id="targetDiv"> <!-- <-- ID here -->
        <input id="username" type="text" placeholder="Choose a Username" required="required" name="username">
        <input id="email" type="text" placeholder="Enter your Email" required="required" name="email">
        <input id="password" type="text" placeholder="Enter your Password" required="required" name="password">
        <input id="password" type="text" placeholder="Re-Enter your Password" required="required" name="password">
    </div>
</div>

ネイティブ JavaScript の場合:

document.getElementById('myForm').addEventListener('click', function(){
    document.getElementById('targetDiv').style.display = "block";
});

"click"これにより、イベント リスナーが"form-step-1-container"div に追加され、divクリックすると入力要素を含む が表示されます。

それで、これは実際に何をしますか？

  • document.getElementById('myForm')で DOM 要素を「取得」しますid="myForm"。
  • .addEventListener()このオブジェクトにイベント リスナーを追加します。最初のパラメーター ( 'click') は、リッスン (「反応」) するイベントを指定します。2 番目のパラメーターは、イベントが発生したときに実行する関数です。この関数はaddEventListener()、ここで行ったように で定義できますが、コードの他の場所で関数を定義して、 で関数名を使用することもできますaddEventListener()。
  • .style.display="block"要素のdisplayCSS スタイルを value"block"に設定し、入力フィールドを再度表示します。
于 2012-12-20T08:26:57.927 に答える
0

コードは次のようになります。

HTML

<div class="form-step-1-container">
<h1>Register with your email address</h1>
<div style="display:none;">
<input id="username" type="text" placeholder="Choose a Username" required="required" name="username">
<input id="email" type="text" placeholder="Enter your Email" required="required" name="email">
<input id="password" type="text" placeholder="Enter your Password" required="required" name="password">
<input id="password" type="text" placeholder="Re-Enter your Password" required="required" name="password">
</div>
</div>

JS

$(document).ready(function() {
  $('.form-step-1-container h1').click(function() {
    $('.form-step-1-container div').css('display', 'block');
  });
});
于 2012-12-20T08:19:49.210 に答える
0

非表示にする要素を含む HTML 要素を、<div>. 次に、スタイル " " を含む CSS クラスをそれに割り当てdisplay:noneます。HTMLコードでそれを行うことができますが、より良い解決策は、ドキュメントが読み込まれるときにJavaScriptで割り当てることです。その場合、Javascriptが無効になっている人に入力が表示されるためです.

次に、onclick ハンドラを div に追加して、CSS クラスを を持つクラスに置き換えますdispay:block。

于 2012-12-20T08:26:54.427 に答える