当从【2 公司信息提交】跳转到【3 等待审核】显示第一个效果；
如果进入页面时是审核已通过的状态显示第2个效果；
如果进入页面时是审核未通过的状态显示第3个效果，而且这个情况下，步骤名称还有特殊效果要求：
当直接点击步骤名称时，比如点击【2 公司信息提交】，这个效果得还原成默认的效果；当再点击【3 等待审核】，又得设置成这种特殊的效果；只有通过【2 公司信息提交】的小步跳转到【3 等待审核】时，才能完全撤销这种特殊效果。
大体上的需求就是以上这些部分，可能还有一些细节没有描述，因为用文字不太容易说清楚，所以只能根据实际效果去体会了。 从最终实现来说，前面的需求中，静态功能需求才是组件实现的核心，后面的业务需求并不具备通用性，我开发这个组件的出发点是根据静态功能需求写出组件的基本功能，然后再结合业务需求设计合理的API跟回调，并且尽可能地将js与html分离，组件与业务分离，以便最终的实现能够将灵活性最大化。
2. 实现思路
首先说html结构：我考虑在前面的需求中，有2个很重要的概念：大步骤，小步骤，并且这些大步骤跟小步骤有包含关系，步骤之间还有顺序的约定，所以得设计两个集合，分别用来存放所有大步骤相关项和所有小步骤相关项，html结构可以设计如下：
- Hide code <nav> <ul> <li><a href="javascript:;">1<span></span>入住须知</a></li> <li><a href="javascript:;">2<span></span>公司信息提交</a></li> <li><a href="javascript:;">3<span></span>等待审核</a></li> <li><a href="javascript:;">4<span></span>合同签订</a></li> </ul> </nav> <div> <div > </div> <div> </div> <div> </div> <div> </div> <div> </div> <div </div> </div>
其中#steps li 就是所有的大步骤项，所有的#step-content .step-pane就是所有的小步骤项。这两个集合仅仅解决了步骤项的存放和顺序问题，对于它们之间的包含关系还没有解决。在需求当中，大步骤与小步骤是这样的包含关系：
这样的话，我们只要通过一个简单的配置数组就能把这种关系体现出来，比如以上这个结构就可以用[1,3,1,1]来说明，表示一共有4个大步骤，其中1,3,4都只有一个小步骤，2有3个小步骤。由于大步骤与小步骤是分开存放在两个集合里面的，所以我们在对这两个集合进行存取的时候，都用的是相对集合的索引位置，但是在实际使用过程中：大步骤的位置是比较好识别的，小步骤的绝对位置就不好识别了，而且相对集合的位置都是从0开始，如果每个小步的内容里面都有定义其它的一些组件，比如表单相关的组件，我们肯定会把这些组件的实例存放到一个配置表里：
var STEP_CONFIG = { 0: { form: { //.... } }, 1: { form: { //.... } }, 2: { form: { //.... } }, 3: { form: { //.... } } //... }
这种配置表是按小步骤的绝对索引来标识的，在实际使用的时候会很不方便，而且当小步的html结构有调整的时候，这个结构就得改，所有引用到它来获取相关组件的地方都得改。最好是完成下面这种配置方式：
var STEP_PANES_CONFIG = { //2,1表示第二个步骤的第一个小步内容 //2,2表示第二个步骤的第二个小步内容 //2,3表示第二个步骤的第三个小步内容 2: { 1: { //配置小步骤相关的东西 }, 2: { //配置小步骤相关的东西 }, 3: { //配置小步骤相关的东西 } //配置大步骤相关的东西 } }
相当于把前面的包含结构抽象成：
