首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 16:10:25
原創
1128 人瀏覽過

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


图片演示:

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!