Javascript для скольжения вниз по форме

Question

Javascript для скольжения вниз по форме

0

Guys У меня есть этот html со следующим кодом. У него есть 2 формы. FormA и форма BI также включили java-скрипт. Я хочу, чтобы форма B скользила вниз, когда я нажимаю ссылку "Интернет-банкинг" выше формы A и когда я нажмите "оплата карты" наоборот.

<html lang="en-GB">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>Payment Page</title>   
    <link rel="stylesheet" href="demo1.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.creditCardValidator.js"></script>
    <script type="text/javascript" src="demo.js"></script>

</head>

<body>

это javascript, который я добавил.

 <script type="text/javascript"> 
    $(document).ready(function(){
      $("#formA").click(function(){
        $("#internet").slideToggle("slow");
      });
    });
    </script>
    <div class="demo">

        <form 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 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>

    </body>

вот http://jsfiddle.net/pz83w/5/ demo.Im новичок в java-скрипте, так что это мой эксперимент. Может ли кто-нибудь подумать, как это сделать?

Ajeesh 23 нояб. 2013, в 16:55

Источник

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

Maxim Ershov · Accepted Answer · 2013-11-23T13-39-00.000Z

Вам необходимо изменить свою функцию следующим образом:

$(document).ready(function(){
$(".tabHeader").click(function(){
  $(".form").each(function(){
      if ($(this).hasClass('show')) {
          $(this).slideUp(400).removeClass('show');
      } else {
          $(this).delay(400).addClass('show').slideDown();
      }
  });
  });
});

Здесь работает скрипка - http://jsfiddle.net/pz83w/7/

Помните, поскольку у вас есть две кнопки, лучше использовать селектор классов, чем использовать id, то же самое с вашими формами. Чтобы вы могли добавить пустой класс (например, "показать" в примере) к выбранному элементу и оживить его так, как вы хотите.

Fiddle обновляется, проверяйте раздел HTML, так как я добавил классы в ваши формы.

Вы можете просто обновить скрипку, как здесь используется селектор?
Я обновил скрипку, вам нужно проверить раздел HTLM, так как я добавил классы в ваши формы, и это то, что заставляет его работать.