Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 16:10:25
Original
1127 Leute haben es durchsucht

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


图片演示:

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!