原文：http://www.barelyfitz.com/projects/tabber/
Tab切换效果，相信大家见的很多，特别是yahoo新主页，tab切换让页面的信息量剧增，页面体积剧减，呵呵。用处还是很多的。国外有个一片介绍这个技术的文章和提供源代码。我这里就简单得分析一下然后提供源代码的下载。

Example1
xhtml code:

<div class="tabber">
 <div class="tabbertab">
   <h2>Tab 1</h2>
   <p>Tab 1 content.</p>
 </div>
 <div class="tabbertab">
   <h2>Tab 2</h2>
   <p>Tab 2 content.</p>
 </div>
 <div class="tabbertab">
   <h2>Tab 3</h2>
   <p>Tab 3 content.</p>
 </div>
</div>

Tab 1,Tab 2,Tab 3就是几个相互切换的层，<h2>装载Tab名，<p>装载Tab内容。

CSS code：
<script type="text/javascript">

/* Optional: Temporarily hide the "tabber" class so it does not "flash"
 on the page as plain HTML. After tabber runs, the class is changed
 to "tabberlive" and it will appear. */

document.write('<style type="text/css">.tabber{display:none;}</style>');
</script>

/*--------------------------------------------------
 REQUIRED to hide the non-active tab content.
 But do not hide them in the print stylesheet!
 --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
 .tabber = before the tabber interface is set up
 .tabberlive = after the tabber interface is set up
 --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
}
/*--------------------------------------------------
 .tabbertab = the tab content
 Add style only after the tabber interface is set up (.tabberlive)
 --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #aaa;
 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
 you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
 scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}

网摘：

引用：