Javascript 为什么两种形式都显示出来

检查小提琴。我有两个表单。我有一个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>

---

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

---

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

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

---

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

更新CSS以隐藏不带

显示

类的表单

更新CSS以隐藏不带

显示

类的表单

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

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

---

或者JSFIDLE的更新：

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

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

---

或者在HTML和CSS中更新Jsfiddle:

，除非您明确要求它不可见，否则一切都是可见的

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

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

当然，您可以在样式表中设置

display:none

，但是您没有包含任何CSS，所以我假设没有

尝试将

style=“display:none”

放在最初要隐藏的表单标记上，如下所示：

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

---

在HTML和CSS中，所有内容都是可见的，除非您明确要求不可见

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

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

当然，您可以在样式表中设置

display:none

，但是您没有包含任何CSS，所以我假设没有

尝试将

style=“display:none”

放在最初要隐藏的表单标记上，如下所示：

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

---

您可以添加以下任一css属性

“显示：无”或“可见性：隐藏”

显示：无表示没有为其分配空间。可见性：隐藏表示标记不可见，但在特定页面上为其分配了空间

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

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

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

---

您可以添加以下任一css属性

“显示：无”或“可见性：隐藏”

显示：无表示没有为其分配空间。可见性：隐藏表示标记不可见，但在特定页面上为其分配了空间

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

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

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

---

它们都在显示，因为没有什么规定不显示它们。真的，你写了这个，但不知道如何设置显示：其中一个窗体上没有？->为什么stackoverflow是为？也为begineers设计的..好吧？它们都显示出来是因为没有什么规定不显示它们。真的，你写了这个，但不知道如何设置显示：在其中一个表单上没有？->为什么stackoverflow是为？也为初学者设计的..好吗？？