jquery tab选项卡切换收集

1、带渐显效果的选项卡菜单

附件如下。

注：不建议修改成：onmouseover事件

 

2、纯js的tab，鼠标移动切换

 

 


   
   
    

    
    
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 

    
    
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 

    
    
  3. <head> 
    4. 

    
    
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
    5. 

    
    
  5. <style> 
    6. 

    
    
  6. <!-- 
    7. 

    
    
  7. html{ 
    8. 

    
    
  8.     margin:0px; 
    9. 

    
    
  9.     padding:0px; 
    10. 

    
    
  10. } 
    11. 

    
    
  11. body{ 
    12. 

    
    
  12.     font-family:'宋体', Arial; 
    13. 

    
    
  13.     margin:0px; 
    14. 

    
    
  14.     padding:0px; 
    15. 

    
    
  15.     color:#155380; 
    16. 

    
    
  16.     font-size:12px; 
    17. 

    
    
  17.     background:#ccc; 
    18. 

    
    
  18. } 
    19. 

    
    
  19. .wai{ 
    20. 

    
    
  20. border:0px solid #f00; 
    21. 

    
    
  21. height:41px; 
    22. 

    
    
  22. width:231px; 
    23. 

    
    
  23. margin-left:0px; 
    24. 

    
    
  24. padding:0px; 
    25. 

    
    
  25. font-size:14px; 
    26. 

    
    
  26. line-height:41px; 
    27. 

    
    
  27. color:#fff; 
    28. 

    
    
  28. padding-left:8px; 
    29. 

    
    
  29. background:#360; 
    30. 

    
    
  30. position:relative; 
    31. 

    
    
  31. } 
    32. 

    
    
  32. #menu{ 
    33. 

    
    
  33. border:0px solid #fff; 
    34. 

    
    
  34. width:85px; 
    35. 

    
    
  35. height:30px; 
    36. 

    
    
  36. margin:0px; 
    37. 

    
    
  37. padding:0px; 
    38. 

    
    
  38. position:absolute; 
    39. 

    
    
  39. top:8px; 
    40. 

    
    
  40. right:10px; 
    41. 

    
    
  41. } 
    42. 

    
    
  42. #menu div{ 
    43. 

    
    
  43. border:0px solid #00f; 
    44. 

    
    
  44. width:27px; 
    45. 

    
    
  45. height:30px; 
    46. 

    
    
  46. line-height:30px; 
    47. 

    
    
  47. float:left; 
    48. 

    
    
  48. font-family:宋体; 
    49. 

    
    
  49. font-weight:lighter; 
    50. 

    
    
  50. font-size:14px; 
    51. 

    
    
  51. margin:0px; 
    52. 

    
    
  52. cursor:pointer; 
    53. 

    
    
  53. text-align:center; 
    54. 

    
    
  54. background:url(images/box_blue.jpg) no-repeat; 
    55. 

    
    
  55. } 
    56. 

    
    
  56. #menu .over{ 
    57. 

    
    
  57. border-bottom:0px solid #f00; 
    58. 

    
    
  58. background:url(images/box.jpg) no-repeat; 
    59. 

    
    
  59. color:#153380; 
    60. 

    
    
  60. font-family:宋体; 
    61. 

    
    
  61. font-size:14px; 
    62. 

    
    
  62. font-weight:lighter; 
    63. 

    
    
  63. } 
    64. 

    
    
  64.  
    65. 

    
    
  65. --> 
    66. 

    
    
  66. </style> 
    67. 

    
    
  67. </head> 
    68. 

    
    
  68. <body> 
    69. 

    
    
  69.  
    70. 

    
    
  70.     <div class="wai">排行榜<div id="menu"><div>总</div><div>周</div><div>月</div></div></div> 
    71. 

    
    
  71.     <div id="sub"> 
    72. 

    
    
  72.         <div class="submenu"> 
    73. 

    
    
  73. 11111111111 
    74. 

    
    
  74.         </div> 
    75. 

    
    
  75.         <div class="submenu"> 
    76. 

    
    
  76. 222222222 
    77. 

    
    
  77.         </div> 
    78. 

    
    
  78.         <div class="submenu"> 
    79. 

    
    
  79. 3333333333 
    80. 

    
    
  80.         </div> 
    81. 

    
    
  81.     </div> 
    82. 

    
    
  82.  
    83. 

    
    
  83.  
    84. 

    
    
  84.         <script> 
    85. 

    
    
  85.         function $(id){return document.getElementById(id)} 
    86. 

    
    
  86.         var menu_id="menu"//标签ID 
    87. 

    
    
  87.         var submenu_id="sub"//子标签ID 
    88. 

    
    
  88.         t=$(menu_id).getElementsByTagName("div");//所有的menu 
    89. 

    
    
  89.         tt=$(submenu_id).getElementsByTagName("div"); 
    90. 

    
    
  90.         var s= new Array(); 
    91. 

    
    
  91.         for(i=0;i<tt.length;i++){ 
    92. 

    
    
  92.             if(tt[i].parentNode.id==submenu_id){ 
    93. 

    
    
  93.                 s.push(tt[i])//将参数添加到原数组末尾 
    94. 

    
    
  94.             } 
    95. 

    
    
  95.         } 
    96. 

    
    
  96.         //s=$(submenu_id).childNodes; 
    97. 

    
    
  97.         for(i=0;i<t.length;i++){ 
    98. 

    
    
  98.             if(document.all){//IE 
    99. 

    
    
  99.             var cc= function(i){ 
    100. 

    
    
  100.                 return function(){ 
    101. 

    
    
  101.                     abc(i) 
    102. 

    
    
  102.                 }; 
    103. 

    
    
  103.             }; 
    104. 

    
    
  104.             t[i].attachEvent("onmouseover",cc(i)); 
    105. 

    
    
  105.             } 
    106. 

    
    
  106.             else{//ff 
    107. 

    
    
  107.             t[i].setAttribute("onmouseover","abc("+i+")"); 
    108. 

    
    
  108.             } 
    109. 

    
    
  109.         } 
    110. 

    
    
  110.         function abc(i){ 
    111. 

    
    
  111.                 for(j=0;j<t.length;j++)t[j].className=''//让所有的按钮变暗 
    112. 

    
    
  112.                 t[i].className='over'//让自己亮 
    113. 

    
    
  113.                 for(j=0;j<s.length;j++)s[j].style.display='none'//让所有框消失 
    114. 

    
    
  114.                 s[i].style.display='block'; 
    115. 

    
    
  115.         } 
    116. 

    
    
  116.         abc(0);//初始状态 
    117. 

    
    
  117.         </script> 
    118. 

    
    
  118.  
    119. 

    
    
  119. </body> 
    120. 

    
    
  120. </html> 
    121.