更新活动标签

我试着去更新类为主动为这些“假冒伪劣”标签使用jQuery脚本，使一个多步的形式，有其自身的导航系统更新活动标签

<!--[if !IE]>start section menu<![endif]--> 
<ul class="section_menu"> 
    <li><a href="#" id="1" class="active"><span><span>stage one</span></span></a></li> 
    <li><a href="#" id="2" ><span><span>Stage two</span></span></a></li> 
    <li><a href="#" id="3" ><span><span>Stage Three</span></span></a></li> 
    <li><a href="#" id="4" ><span><span>Complete</span></span></a></li> 
</ul> 
<!--[if !IE]>end section menu<![endif]-->

IM，标签只是为了通过表格直观显示进度。

脚本：http://www.jankoatwarpspeed.com/turn-any-webform-into-a-powerful-wizard-with-jquery-formtowizard-plugin/

/* Created by jankoatwarpspeed.com */ 

(function($) { 
    $.fn.formToWizard = function(options) { 
     options = $.extend({ 
      submitButton: "" 
     }, options); 

     var element = this; 

     var steps = $(element).find("fieldset"); 
     var count = steps.size(); 
     var submmitButtonName = "#" + options.submitButton; 
     $(submmitButtonName).hide(); 

     // 2 
     $(element).before("<ul id='steps'></ul>"); 

     steps.each(function(i) { 
      $(this).wrap("<div id='step" + i + "'></div>"); 
      $(this).append("<p id='step" + i + "commands'></p>"); 

      // 2 
      var name = $(this).find("legend").html(); 
      $("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + name + "</span></li>"); 

      if (i == 0) { 
       createNextButton(i); 
       selectStep(i); 
      } 
      else if (i == count - 1) { 
       $("#step" + i).hide(); 
       createPrevButton(i); 
      } 
      else { 
       $("#step" + i).hide(); 
       createPrevButton(i); 
       createNextButton(i); 
      } 
     }); 

     function createPrevButton(i) { 
      var stepName = "step" + i; 
      $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Back</a>"); 

      $("#" + stepName + "Prev").bind("click", function(e) { 
       $("#" + stepName).hide(); 
       $("#step" + (i - 1)).show(); 
       $(submmitButtonName).hide(); 
       selectStep(i - 1); 
      }); 
     } 

     function createNextButton(i) { 
      var stepName = "step" + i; 
      $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>"); 

      $("#" + stepName + "Next").bind("click", function(e) { 
       $("#" + stepName).hide(); 
       $("#step" + (i + 1)).show(); 
       if (i + 2 == count) 
        $(submmitButtonName).show(); 
       selectStep(i + 1); 
      }); 
     } 

     function selectStep(i) { 
      $("#steps li").removeClass("current"); 
      $("#stepDesc" + i).addClass("current"); 
     } 

    } 
})(jQuery); 



<script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.2.6/…; <script type="text/javascript" src="formToWizard.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#newproduct").formToWizard({ submitButton: 'SaveAccount' }) }); </script> 


<form id="newproduct" action="#" >

任何解决这一帮助将是非常赞赏，

感谢

来源

2013-01-03 paul young

对不起什么是你的问题？ – wakooka

什么问题;它不应该做什么？ jsFiddle链接的问题？ – DACrosby

对不起，我应该解释的更好，该脚本能正常工作，它只是我不能工作，如何使它更新下一个标签类，以积极主动的联合国前一个虽然标签不得到点击。感谢 –

保罗。

更好的你只是用普通jQueryUI的标签http://jqueryui.com/tabs/。您只需使用标准选项卡的API调用，即可通过java脚本切换这些选项卡。

如果您当前的选项卡点击 - 你可以简单地触发鼠标点击选项卡，你需要：

$("#tab1").trigger("click"); // or something like that, check jQuery docs...

问候。

来源

2013-01-03 10:48:02

更新活动标签

回答

相关问题