在这里先要感谢yahoo的工程师们无私的将他们的成果奉献出来——yui（yahoo!ui）
其实这是它自带的一个例子，我只是熟悉了一下，各种接口调用还是比较方便的
浏览：http://www.healdream.com/upload/html/tabview_test.html
复制代码 代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>TabViewTest</title>
<linkrel="stylesheet"type="text/css"href="tabview1.css">
<linkrel="stylesheet"type="text/css"href="border_tabs1.css">
<scripttype="text/javascript"src="yahoo.js"></script>
<scripttype="text/javascript"src="dom.js"></script>
<scripttype="text/javascript"src="event.js"></script>
<scripttype="text/javascript"src="tabview.js"></script>
<scripttype="text/javascript">
varmyTabs=newYAHOO.widget.TabView("demo");
YAHOO.example.init=function(){
vartabView=newYAHOO.widget.TabView('demo');
tabView.on('contentReady',function(){
obj=document.getElementById("nav");
dest=obj.getElementsByTagName("li");
for(vari=0;i<dest.length;i++){
this.getTab(i).set('activationEvent','mouseover');
}
});
};
YAHOO.example.init();
</script>
<style>
#demo{
border:1pxsolid#000000;
width:40%;
background-color:#c0c0c0;
padding:5px;
}
.yui-navset.yui-content{
padding:10px;
height:200px;
}
</style>
<divid="demo"class="yui-navset">
<ulclass="yui-nav"id="nav">
<liclass="selected"><ahref="#tab1"><em>TabOneLabel</em></a></li>
<li><ahref="#tab2"><em>TabTwoLabel</em></a></li>
<li><ahref="#tab3"><em>TabThreeLabel</em></a></li>
</ul>
<divclass="yui-content">
<div><p>TabOneContent</p></div>
<div><p>TabTwoContent</p></div>
<div><p>TabThreeContent</p></div>
</div>
</div>
相对来说，代码已经很精炼了，相对其他相同效果的网页来说