清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>tabTemplate.html</title>
</head>
<style>
.step{width:100%; height:30px; background-color:#DBEEFF;}
li{float:left;font-size:12px;font-weight:bold;list-style-type:none}
#step_nav li a{ color:#246FB3;text-decoration:none; display:block;width:120px;height:30px;
text-align:center;line-height:200%;padding:0 30px 0 0 ;
background:url(images/step_bg2.gif) right top no-repeat; cursor: default;}
#step_nav li a.current{ background:url(images/step_bg.gif) right top no-repeat; color:#ff810c;}
#step_nav .bgcol{height:30px; background:url(images/step_bg3.gif) #A4D4FF right top no-repeat; }
</style>
<body>
<div class="wrap">
<div class="step">
<ul id="step_nav"></ul>
</div>
<div class="content"></div>
</div>
<SCRIPT type="text/javascript" src="common/javascripts/jquery/jquery.js"></SCRIPT>
<SCRIPT type=text/javascript>jQuery.noConflict();</SCRIPT>
<SCRIPT type="text/javascript" src="stepTemplate.js"></SCRIPT>
<script>
/**
* var steps = new Array();
steps[0]={
stepnum:'1',
stepid:'first',
stepname:'家庭基本信息',
stepsrc:'firsthtml.html'
}
*/
jQuery(function(){
var step_nav = jQuery('#step_nav');
var content = jQuery('.content');
for(var i=0;i<steps.length;i++){
var targetstep = steps[i];
if(typeof(targetstep) != "undefined"){
//标签部分
var tabOutter = jQuery("<li></li>");
var tabInner = null;
if(i==0){
tabInner = jQuery("<a id='step"+targetstep.stepnum+"' " +
"class='"+targetstep.stepid+"_title current' name='step'" +
" href='#'>"+targetstep.stepnum+"."+targetstep.stepname+"</a>");
var tabContent = "<div>" +
"<iframe name='content_frame' marginwidth=0 marginheight=0 width=100% " +
"height=100% src='"+targetstep.stepsrc+"?stepbefore=1&stepnext=2' " +
"frameborder=0></iframe>"+
"</div>";
content.html(tabContent);
}else{
tabInner = jQuery("<a id='step"+targetstep.stepnum+"' " +
"class='"+targetstep.stepid+"_title' name='step' " +
"href='#'>"+targetstep.stepnum+"."+targetstep.stepname+"</a>");
}
step_nav.append(tabOutter.append(tabInner));
}
};
})
//获得页面的页码
function getPageNum(href){
var str = href.substr(href.indexOf("?")+1);
var arrtmp=str.split("&");
for(i=0;i < arrtmp.length;i++){
var temp = arrtmp[i].split("=");
this[temp[0]]=temp[1];
}
};
//下一步：<input type="button" class="button" onclick="window.parent.next(location.href);" value="下一步"/>
function next(href){
var request=new getPageNum(href);
var next=request["stepnext"];
changeStepNavStyle(next);
};
//上一步：<input type="button" class="button" onclick="window.parent.next(location.href);" value="上一步"/>
function before(href){
var request=new getPageNum(href);
var before=request["stepbefore"];
changeStepNavStyle(before);
};
function changeStepNavStyle(stepNum){
jQuery("a[name='step']").each(function(){
jQuery(this).removeClass("current").removeClass("bgcol");
});
for(var j=0;j<stepNum;j++ ){
var obj = document.getElementById("step"+j);
jQuery(obj).addClass("bgcol");
}
var obj = document.getElementById("step"+stepNum);
jQuery(obj).addClass("current");
jQuery('.content').children().children().attr("src",changeContentUrl(steps[stepNum-1]));
}
//获取下一页的地址
function changeContentUrl(targetstep){
var stepbefore = 1;
var stepnext = 1;
if(targetstep.stepnum==1){
stepbefore = 1;
stepnext = 2;
}else if(targetstep.stepnum==steps[steps.length-1].stepnum){
stepbefore = targetstep.stepnum-1;
stepnext = targetstep.stepnum ;
}else{
stepbefore = targetstep.stepnum-1;
stepnext = parseInt(targetstep.stepnum)+1;
}
return targetstep.stepsrc+"?stepbefore="+stepbefore+"&stepnext="+stepnext;
}
</script>
</body>
</html>