Question

我使用下面提供的css制作了正常的现有表格

<!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>Payment Page</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="demo.js"></script>
</head>
<body>
<script type="text/javascript" src="http://paweldecowski.github.com/jQuery-CreditCardValidator/jquery.creditCardValidator.js"></script>
<div class="demo">
            <form>
                <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>
 </div>
</body>
</html>

CSS

    .demo .numbers {

          background-color: #ffd;
          border: 1px solid #eec;
          margin

-bottom: 32px;
      padding: 16px 20px;
    }
    .demo .numbers p {
      margin-bottom: 0;
    }
    .demo .numbers .list {
      margin-bottom: 0;
    }
    .example {
      clear: both;
      margin-bottom: 32px;
    }
    .cards {
      overflow: hidden;
    }
    .cards li {
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
      background-image: url('http://paweldecowski.github.com/jQuery-CreditCardValidator/card_logos.png');
      background-position: 0 0;
      float: left;
      height: 32px;
      margin-right: 8px;
      text-indent: -9999px;
      width: 51px;
    }
    .cards li:last-child {
      margin-right: 0;
    }
    .cards .visa_electron {
      background-position: 204px 0;
    }
    .cards .mastercard {
      background-position: 153px 0;
    }
    .cards .maestro {
      background-position: 102px 0;
    }
    .cards .discover {
      background-position: 51px 0;
    }
    .cards .visa.off {
      background-position: 0 32px;
    }
    .cards .visa_electron.off {
      background-position: 204px 32px;
    }
    .cards .mastercard.off {
      background-position: 153px 32px;
    }
    .cards .maestro.off {
      background-position: 102px 32px;
    }
    .cards .discover.off {
      background-position: 51px 32px;
    }
    form {
      -webkit-box-shadow: 0 1px 3px #bbbbbb;
      -moz-box-shadow: 0 1px 3px #bbbbbb;
      box-shadow: 0 1px 3px #bbbbbb;
      background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
      background: -webkit-linear-gradient(#ffffff, #f5f5f5);
      background: -moz-linear-gradient(#ffffff, #f5f5f5);
      background: -ms-linear-gradient(#ffffff, #f5f5f5);
      background: -o-linear-gradient(#ffffff, #f5f5f5);
      background: linear-gradient(#ffffff, #f5f5f5);
      background-color: #f8f8f8;
      border: 5px solid #fff;
      margin: 0 auto 32px;
      padding: 12px 24px 24px;
      width: 287px;
    }
    form h2 {
      color: #555;
      font-family: "Helvetica Neue", Verdana, Geneva, Arial, Helvetica, sans-serif;
      font-size: 16px;
      font-style: normal;
      margin-bottom: 0;
    }
    form li {
      margin: 8px 0;
    }
    form label {
      color: #555;
      display: block;
      font-size: 14px;
    }
    form label small {
      color: #aaa;
      font-size: 11px;
      line-height: 11px;
      text-transform: uppercase;
    }
    form input {
      -webkit-box-shadow: inset 0 1px 3px -1px #aaaaaa;
      -moz-box-shadow: inset 0 1px 3px -1px #aaaaaa;
      box-shadow: inset 0 1px 3px -1px #aaaaaa;
      border: 1px solid #aaa;
      border-color: #aaa #ddd #ddd #aaa;
      color: #333;
      display: block;
      font-size: 18px;
      height: 30px;
      padding: 0 5px;
      width: 275px;
      -moz-box-sizing: content-box;
    }
    form input.valid {
      background: url('http://paweldecowski.github.com/jQuery-CreditCardValidator/tick.png') 260px center no-repeat;
    }
    .vertical {
      overflow: hidden;
    }
    .vertical div {
      float: left;
      width: 140px;
    }
    .vertical div .or {
      color: #aaa;
      float: left;
      font-size: 12px;
      margin-left: -8px;
      margin-top: 32px;
    }
    .vertical div:last-child {
      float: right;
      text-align: right;
    }
    .vertical div:last-child input {
      float: right;
    }
    .vertical input {
      width: 68px;

}

我想添加另一种表单

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

进入相同的html页面，但应该是一个选项卡式.Tab1-有第一个表单和tab2 - 有第二个表单..我是css的新手，所以我没有任何线索来实现这个。我创建了一个带css的表单，但我不知道如何将第二个表单集成到其中。

Answer 1

这样的事情：http://jsfiddle.net/25WDr/或更通用：http://jsfiddle.net/25WDr/1/

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

在第一个示例中，如果JS被禁用/破坏，则链接不会显示。在第二个示例中，如果JS被禁用/损坏，链接会显示，但它们的行为与正常的页内链接相同。

两个html表单，可以使用选项卡切换

1 个答案: