Question

检查小提琴。我有两个表单。我有一个java脚本，用于在表单之间形成幻灯片。首先加载页面时，显示两种表单，但我只想显示一个表单。后来当我点击链接工作正常。我怎么能纠正这个。

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

和javascript是

$(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();
          }
      });
  });
});

Answer 1

您可以在javascript中隐藏第二个表单，如下所示：

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

或者更新Jsfiddle：http://jsfiddle.net/pz83w/18/

Answer 2

默认情况下，您可以在不希望显示的表单上使用style =“display：none”。

很抱歉我手机发送的格式不正确。

Answer 3

更新CSS以隐藏没有show类

的表单

Answer 4

在HTML和CSS中，一切都是可见的，除非你特别要求它不是。

您的显示和隐藏嵌入在onclick处理程序中，因此在单击链接之前它不会执行。

在点击链接之前，为什么会隐藏某个表单？没有什么可以隐藏它们。

你当然可以在样式表中设置display: none，但是你没有包含任何CSS，所以我认为没有。

尝试将style="display: none"放在您最初要隐藏的表单标记上，如下所示：

<form class='form' id="formB" style="display: none">

Answer 5

好吧，您可以添加以下任一css属性。

“display：none”或“visibility：hidden”

display：none表示没有为其分配空间。 visibility：hidden表示标记不可见，但在该特定页面上为其分配了空间。

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

当您显示页面时添加此项，然后在您希望在单击链接时显示第二个表单时将其显示

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

为什么两个表格都显示出来

5 个答案: