我有一个正常的现有表单，我使用下面提供的 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 的形式，但我不知道如何将第二种形式集成到其中。
最佳答案
是这样的: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 被禁用/损坏，链接会显示，但它们的行为与正常的页内链接一样。
关于jquery - 可以使用选项卡切换的两种 html 表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20162758/