Heim >Web-Frontend >js-Tutorial >用YUI做了个标签浏览效果_javascript技巧

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

WBOY
WBOYOriginal
2016-05-16 19:19:061127Durchsuche

在这里先要感谢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

   
     
   
 

相对来说,代码已经很精炼了,相对其他相同效果的网页来说
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn