为什么两张表格都是一页的

Why does both the forms are in single page?

本文关键字：一页 表格 两张 为什么      更新时间：2023-09-26

这是我的html

<!DOCTYPE HTML>
<html lang="en-GB">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title</title>   
    <link rel="stylesheet" href="demo.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="demo1.js"></script>
    <script type="text/javascript">
$('.tabHeader').click(function () {
    $('.demo form').hide().filter($(this).attr('href')).show()
    return false;
}).eq(0).click();
</script>

</head>
<div class="demo">
    <a href="#formA" class="tabHeader">Form A</a>
    <a href="#formB" class="tabHeader">Form B</a>
    <form id="formA">
         <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">Name:
        <input type="text" name="name" id="name" value="" />Email:
        <input type="text" name="email" id="email" value="" />Comments:
        <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
        <input type="submit" value="submit" />
    </form>

基本上有两种形式，可以使用选项卡进行选择。我有java脚本

$('.tabHeader').click(function () {
    $('.demo form').hide().filter($(this).attr('href')).show()
    return false;
}).eq(0).click();

在进行交换的头中。但是当我实现这个html文件时，两个表单都显示在页面中。但这是演示@http://jsfiddle.net/25WDr这里工作正常，但这个html不工作。js fiddle演示是由一个用户在这里完成的。但我无法实现它。它显示了两种形式。错误在我做的html中。。有人能算出吗

尝试将javascript代码放入文档就绪的中

$(function() {
    $('.tabHeader').click(function () {
        $('.demo form').hide().filter($(this).attr('href')).show()
        return false;
    }).eq(0).click();
});

因为在head部分中，所有的html还没有构建，所以$('.tabHeader')是空的。

您应该等待html部分的加载结束，以便对其进行操作。另一个解决方案可以将脚本放在</body> 之前

在演示中，当点击第一个时，他们实际上隐藏了另一个表单

$(function() {
  $('<a>FormB</a>').prependTo('.demo').click(function () {
  $('.demo form').hide().filter('#formB').show()
  }).click();
  $('<a>FormA</a>').prependTo('.demo').click(function () {
  $('.demo form').hide().filter('#formA').show()
  }).click();
 });
相关文章：