今天做淘宝页面时候碰到一个tab切换 如下图所示：

 

HTML简单的自定义属性制作tab切换

当我鼠标移到第一个tab时候 那个小三角形在第一个tab项里 移到第二个时候 就到了第二个里面  这种效果 我这里用了个小技巧 就是在HTML中自定义属性 以前也碰到过这种类似的  所以今天也有必要分享下 当然我在测试时候 没有把所有的背景图片合并在一起  这是为了测试而已 当然没有合并图片有几个小缺点 第一当我鼠标一开始移上去的时候 有一点点抖动那种效果 如果不怎么仔细看 很难分辨出来，第二涉及到页面的性能方面 我们都知道一张图片发送一个请求 那么n张图片发送n个请求，那么服务器的压力增大了 同样客户端性能降低了 ，所以合并小背景图是为了减少http请求数，提高网站的性能，但是我这里没有用小背景图片  直接用个大点的 当作最外层ul的背景  如果图片合并后就可以解决一点点抖动问题  我这是为了测试 当然这做页面时候 我不建议用大背景图（同时没有合并）这种方式 废话不多说 然后我在li里面自定义一个hoverclass属性 目的是我鼠标移上去的时候 获取li当前的属性 同样在样式里面定义了各个背景图片 然后再鼠标移上去的同时 让最外层ul增加一个类 目的是替换最外面的背景！下面是代码：

 



    

  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=utf-8" /> 
    5. 

  5. <title>无标题文档</title> 
    6. 

  6. <style> 
    7. 

  7. body,div,ul,li{ margin:0; padding:0;} 
    8. 

  8. ul,li{ list-style:none;} 
    9. 

  9. .list{ width:960px; height:201px; overflow:hidden; margin:50px auto 0; background:#ccb081 url(icon1.jpg) no-repeat;} 
    10. 

  10. .list li{ width:133px; height:186px; overflow:hidden; float:left; margin-left:3px; display:inline;} 
    11. 

  11. .list1{ background:url(icon1.jpg) no-repeat;} 
    12. 

  12. .list2{ background:url(icon2.jpg) no-repeat;} 
    13. 

  13. .list3{ background:url(icon3.jpg) no-repeat;} 
    14. 

  14. .list4{ background:url(icon4.jpg) no-repeat;} 
    15. 

  15. .list5{ background:url(icon5.jpg) no-repeat;} 
    16. 

  16. .list6{ background:url(icon6.jpg) no-repeat;} 
    17. 

  17. .list7{ background:url(icon7.jpg) no-repeat;} 
    18. 

  18. .content-all{ width:978px; border:1px solid #333; overflow:hidden; margin:10px auto 0;} 
    19. 

  19. .hide{ display:none;} 
    20. 

  20. </style> 
    21. 

  21. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>  
    22. 

  22. </head> 
    23. 

  23.  
    24. 

  24. <body> 
    25. 

  25.     <ul class="list"> 
    26. 

  26.         <li hoverclass="list1"><img  src="photo.jpg"/></li> 
    27. 

  27.         <li hoverclass="list2"><img  src="photo.jpg"/></li> 
    28. 

  28.         <li hoverclass="list3"><img  src="photo.jpg"/></li> 
    29. 

  29.         <li hoverclass="list4"><img  src="photo.jpg"/></li> 
    30. 

  30.         <li hoverclass="list5"><img  src="photo.jpg"/></li> 
    31. 

  31.         <li hoverclass="list6"><img  src="photo.jpg"/></li> 
    32. 

  32.         <li hoverclass="list7"><img  src="photo.jpg"/></li> 
    33. 

  33.     </ul> 
    34. 

  34.     <div class="content-all"> 
    35. 

  35.         <div class="content">1111</div> 
    36. 

  36.         <div class="content hide">2222</div> 
    37. 

  37.         <div class="content hide">33333</div> 
    38. 

  38.         <div class="content hide">44444</div> 
    39. 

  39.         <div class="content hide">55555</div> 
    40. 

  40.         <div class="content hide">666666</div> 
    41. 

  41.         <div class="content hide">77777</div> 
    42. 

  42.     </div> 
    43. 

  43. <script type="text/javascript">  
    44. 

  44. $(function(){ 
    45. 

  45.     $(".list li").hover(function(){ 
    46. 

  46.         var r = $(this).attr("hoverclass"); 
    47. 

  47.         $(".list").attr("className","list " + r);  
    48. 

  48.         var index = $(".list li").index(this); 
    49. 

  49.         $(".content").eq(index).show().siblings().hide(); 
    50. 

  50.    }) 
    51. 

  51.      
    52. 

  52. }) 
    53. 

  53. </script>   
    54. 

  54. </body> 
    55. 

  55. </html> 
    56.