当前位置:主页 > 教程 > 网页设计 >

jQuery简单几行代码实现tab切换
栏目分类:网页设计   发布日期:2015-09-02   浏览次数:

今天突然心血来潮,想到一个很简单的方法即可达到的tab效果其实逻辑很简单,但看到网上基本上没这样写的不知道实际应用中是否会有问题呢,请大侠指教<!doctypehtml><htmllang="en"><head><metacharset="UTF-8">&

今天突然心血来潮,想到一个很简单的方法即可达到的tab效果

其实逻辑很简单,但看到网上基本上没这样写的

不知道实际应用中是否会有问题呢,请大侠指教

  1. <!doctype html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>jQuery简易选项卡</title> 
  6. <style> 
  7.     *{ margin:0; padding:0;} 
  8. body, ul, li { 
  9.     margin:0; 
  10.     padding:0; 
  11. body { 
  12.     font:12px/1.5 Tahoma; 
  13. #outer { 
  14.     width:450px; 
  15.     margin:10px auto; 
  16. #tab { 
  17.     overflow:hidden; 
  18.     zoom:1; 
  19.     background:#000; 
  20.     border:1px solid #000; 
  21. #tab li { 
  22.     float:left; 
  23.     color:#fff; 
  24.     height:30px; 
  25.     cursor:pointer; 
  26.     line-height:30px; 
  27.     list-style-type:none; 
  28.     padding:0 20px; 
  29. #tab li.current { 
  30.     color:#000; 
  31.     background:#ccc; 
  32. #content { 
  33.     border:1px solid #000; 
  34.     border-top-width:0; 
  35. #content ul { 
  36.     line-height:25px; 
  37.     display:none; 
  38.     margin:0 30px; 
  39.     padding:10px 0; 
  40. </style> 
  41. </head> 
  42. <body> 
  43. <div id="outer"> 
  44.     <ul id="tab"> 
  45.         <li class="current">第一课</li> 
  46.         <li>第二课</li> 
  47.         <li>第三课</li> 
  48.     </ul> 
  49.     <div id="content"> 
  50.         <ul style="display:block;"> 
  51.            1111 
  52.         </ul> 
  53.         <ul> 
  54.             2222 
  55.         </ul> 
  56.         <ul> 
  57.            3333 
  58.         </ul> 
  59.     </div> 
  60. </div> 
  61. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
  62. <script> 
  63.     $(function(){ 
  64.         window.onload = function() 
  65.         { 
  66.             var $li = $('#tab li'); 
  67.             var $ul = $('#content ul'); 
  68.             $li.click(function(){ 
  69.                 $li.removeClass(); 
  70.                 var $t = $(this).index(); 
  71.                 $(this).addClass('current'); 
  72.                 $ul.css('display','none'); 
  73.                 $ul.eq($t).css('display','block'); 
  74.             }) 
  75.         } 
  76.     }); 
  77. </script> 
  78. </body> 
  79. </html> 

图片演示:

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

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

特效 教程 资源 资讯