首页 >web前端 >js教程 >jQuery简单几行代码实现tab切换_jquery

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

WBOY
WBOY原创
2016-05-16 16:10:251196浏览

今天突然心血来潮,想到一个很简单的方法即可达到的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>


图片演示:

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn