Heim  >  Artikel  >  Web-Frontend  >  jQuery简单几行代码实现tab切换_jquery

jQuery简单几行代码实现tab切换_jquery

WBOY
WBOYOriginal
2016-05-16 16:10:251128Durchsuche

今天突然心血来潮,想到一个很简单的方法即可达到的tab效果

其实逻辑很简单,但看到网上基本上没这样写的

不知道实际应用中是否会有问题呢,请大侠指教

复制代码 代码如下:




   
    jQuery简易选项卡




   

           
  • 第一课

  •        
  • 第二课

  •        
  • 第三课

  •    

   

       

               1111
           

       

                2222
           

       

               3333
           

   


">http://libs.baidu.com/jquery/1.9.0/jquery.js">>
<script><br /> $(function(){<br /> window.onload = function()<br /> {<br /> var $li = $('#tab li');<br /> var $ul = $('#content ul');<br /> $li.click(function(){<br /> $li.removeClass();<br /> var $t = $(this).index();<br /> $(this).addClass('current');<br /> $ul.css('display','none');<br /> $ul.eq($t).css('display','block');<br /> })<br /> }<br /> });<br /> </script>


图片演示:

以上就是本文所述的全部内容了,希望大家能够喜欢。

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