大佬教程收集整理的这篇文章主要介绍了简单实现下一步,下一步,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<!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>
以上是大佬教程为你收集整理的简单实现下一步,下一步全部内容,希望文章能够帮你解决简单实现下一步,下一步所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。