学习网页上的tab制作[图]

[%repeat_0 match="/data/option"%] [%_repeat_0%]

[%=@title%]	[%=@count%]票 [[%=@percent%]％]

最近一个项目要在网页上使用人性化的界面以及操作.这让我联想到了c/s模式开发中的tab.
昨天晚上拜读了Erik Arvidsson写的Tab Pane.感觉挺实用的而且封装的很好.调用简洁,样式控制也很到位.
使用：
下载地址：http://webfx.eae.net/download/tabpane102.zip
 
1、创建网页test-tab.html，UE(UltraEdit)编辑，内容如下：
<!-- 头部引入 -->
<script type="text/javascript" src="js/tabpane.js"></script>
<link type="text/css" rel="StyleSheet" href="css/tab.webfx.css" />
<!-- 简单的调用 -->
<div class="tab-pane" id="tab-pane-1">
   <div class="tab-page">
      <h2 class="tab">General</h2>
      This is text of tab 1. This is text of tab 1.
      This is text of tab 1. This is text of tab 1.
   </div>
   <div class="tab-page">
      <h2 class="tab">Privacy</h2>
      This is text of tab 2. This is text of tab 2.
      This is text of tab 2. This is text of tab 2.
   </div>
</div>
注意：下画线部分的文件是否存在，可以在下载文件夹中找到。
2、效果：
 
3、具体的使用见下载文件中的例子