用YUI做了个标签浏览效果

时间：2021-05-18

在这里先要感谢yahoo的工程师们无私的将他们的成果奉献出来——yui（yahoo!ui）
其实这是它自带的一个例子，我只是熟悉了一下，各种接口调用还是比较方便的
浏览：http:///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>

相对来说，代码已经很精炼了，相对其他相同效果的网页来说

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章