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向下滑動的形式

回答

相關問題