Question

伙计我有这个html与下面的代码。它有2个forms.formA和表单BI也包括一个java脚本。我想让formB滑下来，当我点击链接“网上银行”上面的表格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。我是java脚本的新手，所以这是我的实验。有人想知道如何做到这一点吗？

Answer 1

您需要按以下方式修改您的功能：

$(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更好，与表单相同。您可以将空白类（如示例中的“show”）添加到所选项目，并按照您希望的方式为其设置动画。

小提琴已更新，请检查HTML部分，因为我在您的表单中添加了类。

用于向下滑动表单的Javascript

1 个答案: