Yui made a label browsing effect _javascript skills

First of all, we would like to thank the Yahoo engineers for their selfless dedication to their results--yui (Yahoo! Ui
In fact, this is its own example, I was just familiar with the various interface calls are more convenient
Browse: http://www.healdream.com/upload/html/tabview_test.html

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<title>tabview test</title>
<link rel= "stylesheet" type= "Text/css" href= "Tabview1.css" >
<link rel= "stylesheet" type= "Text/css" href= "Border_tabs1.css" >
<script type= "Text/javascript" src= "Yahoo.js" ></script>
<script type= "Text/javascript" src= "Dom.js" ></script>
<script type= "Text/javascript" src= "Event.js" ></script>
<script type= "Text/javascript" src= "Tabview.js" ></script>
<script type= "Text/javascript" >
var mytabs = new YAHOO.widget.TabView ("demo");
YAHOO.example.init = function () {
var tabview = new YAHOO.widget.TabView (' demo ');
Tabview.on (' Contentready ', function () {
Obj=document.getelementbyid ("Nav");
Dest=obj.getelementsbytagname ("Li");
for (Var i=0;i<dest.length;i++) {
This.gettab (i). Set (' Activationevent ', ' mouseover ');
}
});
};

YAHOO.example.init ();
</script>
<style>
#demo {
border:1px solid #000000;
width:40%;
Background-color: #c0c0c0;
padding:5px;
}
. yui-navset.yui-content{
padding:10px;
height:200px;
}
</style>
<div id= "Demo" class= "Yui-navset" >
<ul class= "Yui-nav" id= "NAV" >
<li class= "selected" ><a href= "#tab1" ><em>tab one label</em></a></li>
<li><a href= "#tab2" ><em>tab two label</em></a></li>
<li><a href= "#tab3" ><em>tab Three label</em></a></li>
</ul>
<div class= "Yui-content" >
<div><p>tab One content</p></div>
<div><p>tab two content</p></div>
<div><p>tab Three content</p></div>
</div>
</div>

Relatively speaking, the code has been very refined, compared to other pages of the same effect