利用jquery实现tab步骤选项卡



7 24 9



特效描述:利用jquery实现 tab步骤 选项卡,利用jquery实现tab步骤选项卡

代码结构

1. 引入CSS

<link href="style.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="jquery-latest.pack.js"></script>

3. HTML代码

<center>
<div id="wizardwrapper">
  <div class="1">
    <h3>Step 1</h3>
    <div id="wizardcontent"> </div>
    <div class="buttons">
      <button type="submit" class="previous"  disabled="disabled"> <img src="images/arrow_left.png" alt=""/> Back </button>
      <button type="submit" class="next" onClick="loadnext(1,2);"> Next <img src="images/arrow_right.png" alt="" /> </button>
    </div>
    <ul id="mainNav" class="fiveStep">
      <li class="current"><a title=""><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li><a title=""><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li><a title=""><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li><a title=""><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="mainNavNoBg"><a title=""><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></a></li>
    </ul>
    <div style="clear:both"></div>
  </div>
  <div id="wizardpanel" class="2">
    <h3>Step 2</h3>
    <div id="wizardcontent"> </div>
    <div class="buttons">
      <button type="submit" class="previous" onClick="loadnext(2,1);"> <img src="images/arrow_left.png" alt="" /> Back </button>
      <button type="submit" class="next" onClick="loadnext(2,3);"> Next <img src="images/arrow_right.png" alt="" /> </button>
    </div>
    <ul id="mainNav" class="fiveStep">
      <li class="lastDone"><a href="/" title=""><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="current"><a title=""><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li><a title=""><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li><a title=""><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="mainNavNoBg"><a title=""><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></a></li>
    </ul>
  </div>
  <div id="wizardpanel" class="3">
    <h3>Step 3</h3>
    <div id="wizardcontent"> </div>
    <div class="buttons">
      <button type="submit" class="previous" onClick="loadnext(3,2);"> <img src="images/arrow_left.png" alt="" /> Back </button>
      <button type="submit" class="next"  onclick="loadnext(3,4);"> Next <img src="images/arrow_right.png" alt=""/> </button>
    </div>
    <ul id="mainNav" class="fiveStep">
      <li class="done"><a href="/" title=""><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="lastDone"><a href="/" title=""><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="current"><a title=""><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li><a title=""><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="mainNavNoBg"><a title=""><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></a></li>
    </ul>
  </div>
  <div id="wizardpanel" class="4" >
    <h3>Step 4</h3>
    <div id="wizardcontent"> </div>
    <div class="buttons">
      <button type="submit" class="previous" onClick="loadnext(4,3);"> <img src="images/arrow_left.png" alt="" /> Back </button>
      <button type="submit" class="next" onClick="loadnext(4,5);"> Next <img src="images/arrow_right.png" alt="" /> </button>
    </div>
    <ul id="mainNav" class="fiveStep">
      <li class="done"><a href="/" title=""><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="done"><a href="/" title=""><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="lastDone"><a href="/" title=""><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="current"><a title=""><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="mainNavNoBg"><a title=""><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></a></li>
    </ul>
  </div>
  <div id="wizardpanel" class="5">
    <h3>Step 5</h3>
    <div id="wizardcontent"> </div>
    <div class="buttons">
      <button type="submit" class="previous" onClick="loadnext(5,4);"> <img src="images/arrow_left.png" alt="" /> Back </button>
      <button type="submit" class="next" onClick="submit()"> Finish <img src="images/arrow_right.png" alt="" /> </button>
    </div>
    <ul id="mainNav" class="fiveStep">
      <li class="done"><a href="/" title=""><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="done"><a href="/" title=""><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="done"><a href="/" title=""><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="lastDone"><a href="/" title=""><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="mainNavNoBg current"><a title=""><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></a></li>
    </ul>
  </div>
<br>
</center>  
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动星星打分 切换按钮 表单 表单美化 表单插件 表单美化插件 其他 文件上传 步骤

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到