选项卡创建向导
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
body
{
font-family:"Trebuchet MS",verdana;
margin:50px auto;
width:600px;
}
h3{
margin:0;
padding:0;
}
ul{
float:left;
list-style:none;
margin:0pt;
padding:0pt;
width:600px;
}
li{
border-left:1px solid #000;
border-right:1px solid #000;
cursor:pointer;
float:left;
padding:5px;
text-align:center;
width:100px;
}
.tabContainer{
border:1px solid #000;
float:left;
width:600px;
}
.tabContent{
border-top:1px solid #000;
float:left;
height:100px;
padding:5px;
text-align:justify;
width:590px;
}
.active{
background-color:#6AA63B;
color:white;
}
.prev{
float:left;
}
.next{
flaot:right;
}
#order{
border:0px solid #000;
}
</style>
</head>
<body>
<form action="">
<div class="tabContainer">
<ul class="tabHeader">
<li>Name</li>
<li>Selection</li>
<li>Confirmation</li>
</ul>
<div class="contents">
<div class="tabContent">
<p><strong>Please enter your name</strong>
<input type="text" id="username" />
</p>
<input type="button" value="Next >> " class="next" />
</div>
<div class="tabContent">
<p><strong>Please select a product</strong>
<select id="product">
<option>Shirt</option>
<option>Jeans</option>
<option>Shoes</option>
</select>
<br/><br/>
<strong>select quantity</strong>
<select id="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
<input type="button" value="Next >>" class="next" />
<input type="button" value="<< Previous" class="prev" />
</div>
<div class="tabContent last" >
<p>
<strong>Review</strong>
<div id="order"></div>
<input type="button" value="<<Previous" class="prev" />
</div>
</div>
</div>
</form>
<script type="text/javascript" src="../jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.tabContent:gt(0)').hide();
$('.tabHeader > li:eq(0)').addClass('active');
$('input:button').click(function(){
var currentTabIndex=getCurrentTabIndex(this);
if($(this).hasClass('prev')){
showHideTabs(--currentTabIndex);
}else if($(this).hasClass('next'))
{
showHideTabs(++currentTabIndex);
}
});
function getCurrentTabIndex(e1){
var parent=$(e1).parent('.tabContent');
return $('.tabContent').index(parent);
}
function showHideTabs(index){
$('.tabHeader > li.active').removeClass('active');
$('.tabHeader > li:eq('+index+')').addClass('active');
$('.tabContent:visible').hide();
$('.tabContent:eq('+index+')').show();
if($('.tabContent:eq('+index+')').hasClass('last')){
displaySelectedValues();
}
$(this).addClass('active');
$('.tabContent:visible').hide();
$('.tabContent:eq('+index+')').show();
}
function displaySelectedValues(){
var name=$('#username').val();
var product=$('#product').val();
var quantity=$('#quantity').val();
var strHtml='Hello '+name+' ,';
strHtml+='Please confirm your selection:<br/>';
strHtml+='<strong>Item:</strong> '+product;
strHtml+='<br/>';
strHtml+='<strong>Quantity:</strong>'+quantity;
$('#order').html(strHtml);
}
});
</script>
</body>
</html>
