首页  >  文章  >  web前端  >  用YUI做了个标签浏览效果_javascript技巧

用YUI做了个标签浏览效果_javascript技巧

WBOY
WBOY原创
2016-05-16 19:19:061107浏览

在这里先要感谢yahoo的工程师们无私的将他们的成果奉献出来——yui(yahoo! ui)
其实这是它自带的一个例子,我只是熟悉了一下,各种接口调用还是比较方便的
浏览:http://www.healdream.com/upload/html/tabview_test.html

复制代码 代码如下:

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

TabView Test


<script></script>
<script></script>
<script></script>
<script></script>
<script> <BR>var myTabs = new YAHOO.widget.TabView("demo"); <BR>YAHOO.example.init = function() { <BR> var tabView = new YAHOO.widget.TabView('demo'); <BR> tabView.on('contentReady', function() { <BR> obj=document.getElementById("nav"); <BR> dest=obj.getElementsByTagName("li"); <BR> for(var i=0;i<dest.length;i++){ <BR> this.getTab(i).set('activationEvent', 'mouseover'); <BR> } <BR> }); <BR>}; <br><br>YAHOO.example.init(); <BR></script>  
   
   
                    
     
   
         

Tab One Content

   
         

Tab Two Content

   
         

Tab Three Content

   
     
   
 

相对来说,代码已经很精炼了,相对其他相同效果的网页来说
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn