配置使用下一步，下一步標籤

時間 2019-12-01

標籤配置使用下一步標籤简体版

原文原文鏈接

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>tabTemplate.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

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

：step_bgjavascript

:step_bg2html

:step_bg3java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。