http://jsfiddle.net/pz83w/16/

Überprüfen Sie die Geige. Ich habe zwei Formulare. Ich habe ein Java-Skript zum Bilden einer Folie zwischen den Formularen. Zuerst, wenn die Seite geladen wird, werden beide Formulare angezeigt, aber ich möchte nur ein Formular anzeigen. Später, wenn ich klicke Die Links funktionieren einwandfrei. Wie kann ich das korrigieren?

<div class="demo">

    <form class='form show' id="formA">

<a href="#formA" class="tabHeader">Card Payment</a>
<a href="#formB" class="tabHeader">Internet banking</a>

 <h2>Card Payment</h2>

        <input type='hidden' id='ccType' name='ccType' />
        <ul class="cards">
            <li class="visa">Visa</li>
            <li class="visa_electron">Visa Electron</li>
            <li class="mastercard">MasterCard</li>
            <li class="maestro">Maestro</li>
        </ul>
        <label for="card_number">Card number</label>
        <input type="text" name="card_number" id="card_number">
        <div class="vertical">
            <label for="expiry_date">Expiry date <small>mm/yy</small>

            </label>
            <input type="text" name="expiry_date" id="expiry_date" maxlength="5">
            <label for="cvv">CVV</label>
            <input type="text" name="cvv" id="cvv" maxlength="3">
        </div>
        <div class="vertical maestro">
            <label for="issue_date">Issue date <small>mm/yy</small>

            </label>
            <input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>

            <label for="issue_number">Issue number</label>
            <input type="text" name="issue_number" id="issue_number" maxlength="2">
        </div>
        <label for="name_on_card">Name On card</label>
        <input type="text" name="name_on_card" id="name_on_card">
        <input type="submit" value="Pay Now !">
    </form>
    <form class='form' id="formB">
<div id="internet">     
<a href="#formA" class="tabHeader">Card Payment</a>
<a href="#formB" class="tabHeader">Internet banking</a>

 <h2>Internet Banking</h2>

    <ul class="cards">
            <li class="visa">Visa</li>
            <li class="visa_electron">Visa Electron</li>
            <li class="mastercard">MasterCard</li>
            <li class="maestro">Maestro</li>
        </ul>

    </form>
</div>

Und Javascript ist

$(document).ready(function(){
  $(".tabHeader").click(function(){
      $(".form").each(function(){
          if ($(this).hasClass('show')) {
              $(this).slideUp(900).removeClass('show');
          } else {
              $(this).delay(900).addClass('show').slideDown();
          }
      });
  });
});
1
Ajeesh 23 Nov. 2013 im 20:11

5 Antworten

Beste Antwort

Sie können das zweite Formular in Javascript folgendermaßen ausblenden:

$(".form").not(':first').hide();

Oder ein Update der Jsfiddle: http://jsfiddle.net/pz83w/18/

2
Mike Vranckx 23 Nov. 2013 im 16:15

Nun, Sie können eine der folgenden CSS-Eigenschaften hinzufügen.

"Anzeige: keine" oder "Sichtbarkeit: versteckt"

Anzeige: Keine bedeutet, dass kein Speicherplatz dafür zugewiesen wird. Sichtbarkeit: Ausgeblendet bedeutet, dass das Tag nicht sichtbar ist, aber auf dieser bestimmten Seite Platz dafür zugewiesen ist.

$("#formB").css("visibility","hidden");

Fügen Sie dies hinzu, wenn Sie die Seite anzeigen, und machen Sie sie dann sichtbar, wenn das zweite Formular angezeigt werden soll, wenn Sie auf den Link klicken.

$("#formB").css("visibility","visible");
0
SsNewbie 23 Nov. 2013 im 16:46

In HTML und CSS ist alles sichtbar, es sei denn, Sie fordern ausdrücklich an, dies nicht zu tun.

Ihr Ein- und Ausblenden ist in einen Onclick-Handler eingebettet, sodass es erst ausgeführt wird, wenn auf die Links geklickt wird.

Warum sollte ein Formular ausgeblendet werden, bis auf die Links geklickt wird? Es gibt nichts, was sie verstecken könnte.

Sie könnten natürlich display: none in ein Stylesheet einfügen, aber Sie haben kein CSS eingefügt, daher gehe ich davon aus, dass es keines gibt.

Versuchen Sie, style="display: none" in das Formular-Tag einzufügen, das Sie zunächst ausblenden möchten.

<form class='form' id="formB" style="display: none">
1
Brandon 23 Nov. 2013 im 16:15

Standardmäßig können Sie style = "display: none" für das Formular verwenden, das nicht angezeigt werden soll.

Entschuldigung für das schlechte Format, das von meinem Telefon gesendet wurde.

1
Qpirate 23 Nov. 2013 im 16:14

Aktualisieren Sie CSS, um Formulare ohne show -Klasse auszublenden

1
Warlock 23 Nov. 2013 im 16:15