首頁 > web前端 > js教程 > jQuery簡單幾行程式碼實作tab切換_jquery

jQuery簡單幾行程式碼實作tab切換_jquery

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

今天突然心血來潮,想到一個很簡單的方法即可達到的tab效果

其實邏輯很簡單,但看到網路上基本上沒這樣寫的

不知道實際應用是否會有問題呢,請大俠指教

複製程式碼 程式碼如下:




   
    jQuery簡易選項卡




   

           
  • 第一課

  •        
  • 第二課

  •        
  • 第三課

  •    

   

       

               1111
           

       

                2222
           

       

               3333
           

   


>
<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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板