Home  >  Article  >  Web Front-end  >  jQuery简单几行代码实现tab切换_jquery

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

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

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


图片演示:

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn