Javascript向下滑动的形式

伙计们我有这个HTML与下面的代码。它有2个forms.formA和形式BI也包括一个java脚本也。我想让formB滑下来，当我点击链接“网上银行“的形式A以上，当我点击”卡支付“，反之亦然。Javascript向下滑动的形式

<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脚本，所以这是我experiment.Couldsomeone人物如何做到这一点？

来源

2013-11-23 Ajeesh

你需要修改你的函数以下列方式：

$(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部分，因为我已经添加类到您的窗体。

来源

2013-11-23 15:25:21

你能不能更新小提琴，这里选择器是如何使用的？ – Ajeesh

我更新了小提琴，您需要检查它的HTLM部分，因为我向窗体添加了类，这就是它的工作原理。 –

谢谢你，请帮忙:) – Ajeesh

Javascript向下滑动的形式

回答

相关问题