夏日博客

A-A+

简单的tab选项卡

2016年08月14日 前端设计 暂无评论 阅读 4 views 次

因为项目的需求，需要在站点首页做个简单的tab选项卡，每个选项卡下面有一小部分的文字，当然还要有一个像素的灰色边，从网上找了几款，都不太理想，昨天的时候改了老半天也没修改好样式，今天在懒人网上面找了一个简单的tab选项卡，修改了一下，正符合站点的要求，整个代码也非常的简单，所以一定是要分享出来的，如果有需要用到的朋友可以直接拿来使用。

  1. <style>  
  2. *{margin:0;padding:0;}  
  3. body{font-size:14px;font-family:"Microsoft YaHei";}  
  4. ul,li{list-style:none;}  
  5.   
  6. #tab{position:relative;}  
  7. #tab .tabList ul li{  
  8.     float:left;  
  9.     background:#fefefe;  
  10.     background:-moz-linear-gradient(top, #fefefe, #ededed);   
  11.     background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed));  
  12.     background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));  
  13.     border:1px solid #ccc;  
  14.     padding:5px 0;  
  15.     width:100px;  
  16.     text-align:center;  
  17.     margin-left:-1px;  
  18.     position:relative;  
  19.     cursor:pointer;  
  20. }  
  21. #tab .tabCon{  
  22.     position:absolute;  
  23.     left:-1px;  
  24.     top:32px;  
  25.     border:1px solid #ccc;  
  26.     border-top:none;  
  27.     width:403px;  
  28.     height:100px;  
  29. }  
  30. #tab .tabCon div{  
  31.     padding:10px;  
  32.     position:absolute;  
  33.     opacity:0;  
  34.     filter:alpha(opacity=0);  
  35. }  
  36. #tab .tabList li.cur{  
  37.     border-bottom:none;  
  38.     background:#fff;  
  39. }  
  40. #tab .tabCon div.cur{  
  41.     opacity:1;  
  42.     filter:alpha(opacity=100);  
  43. }  
  44. </style>  
  45. </head>  
  46. <body>  
  47.   
  48. <!-- 代码 begin -->  
  49. <div id="tab" style="margin-left:460px;margin-top:20px">  
  50.   <div class="tabList">  
  51.     <ul>  
  52.         <li class="cur">许嵩</li>  
  53.         <li>周杰伦</li>  
  54.         <li>林俊杰</li>  
  55.         <li>陈奕迅</li>  
  56.     </ul>  
  57.   </div>  
  58.   <div class="tabCon">  
  59.     <div class="cur">断桥残雪、千百度、幻听、想象之中</div>  
  60.     <div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>  
  61.     <div>被风吹过的夏天、江南、一千年以后</div>  
  62.     <div>十年、K歌之王、浮夸</div>  
  63.   </div>  
  64. </div>  
  65.   
  66. <script>  
  67. window.onload = function() {  
  68.     var oDiv = document.getElementById("tab");  
  69.     var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");  
  70.     var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");  
  71.     var timer = null;  
  72.     for (var i = 0; i < oLi.length; i++) {  
  73.         oLi[i].index = i;  
  74.         oLi[i].onmouseover = function() {  
  75.             show(this.index);  
  76.         }  
  77.     }  
  78.     function show(a) {  
  79.         index = a;  
  80.         var alpha = 0; //xiariboke.net  
  81.         for (var j = 0; j < oLi.length; j++) {  
  82.             oLi[j].className = "";  
  83.             aCon[j].className = "";  
  84.             aCon[j].style.opacity = 0;  
  85.             aCon[j].style.filter = "alpha(opacity=0)";  
  86.         }  
  87.         oLi[index].className = "cur";  
  88.         clearInterval(timer);  
  89.         timer = setInterval(function() {  
  90.             alpha += 2;  
  91.             alpha > 100 && (alpha = 100);  
  92.             aCon[index].style.opacity = alpha / 100;  
  93.             aCon[index].style.filter = "alpha(opacity=" + alpha + ")";  
  94.             alpha == 100 && clearInterval(timer);  
  95.         },  
  96.         5)  
  97.     }  
  98. }  
  99. </script>  
  100. <!-- 代码 en -->  
  101. </body>  
  102. </html>  

至于样式神马的，自己动手修改一下就OK了，非常简单的一款js选项卡效果，如果实在跟自己的站点无法整合的话，直接在这个基础上单独进行修改，然后再进行 iframe 包含进来即可。

标签：

给我留言