1. 程式人生 > >Tab切換欄(jQuery方法實現)

Tab切換欄(jQuery方法實現)

效果圖

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  *{margin: 0px;padding: 0px;list-style: none;font-family: sans-serif;}
  #tabHead>span{
     display: inline-block;
     padding: 10px;
     background-color: #ccc;
     cursor: pointer;
     border-left: 1px solid gray;
     border-bottom: 1px solid gray;

  }
#tabHead >span.current{
   background-color: #fff;
   border-bottom: 1px solid #fff;
}
 .tbShow{
   padding:10px;
   height: 80px;
   display: none;
 }


  </style>
  <script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
  <div class="tab-box" style="border: 2px solid gray; width:339px;margin:10px auto;">
    
  <div class="tabHead" id="tabHead">
 <span class="current" style="margin-left: -1px;">公司動態</span><span>開學典禮</span><span>學員感言</span><span>學員故事</span>
      </div>
      <div class="tabBody" id="tabBody" style="font-size:14px;height:100px;width: 340px; overflow: hidden;">
          
         <div class="tbShow" style="display:block">
            <ul>
               <li>網路營銷課程鉅惠5000,只剩最後10天</li>
               <li>《傳智特刊》開年任性大改版,第22期炫酷上線</li>
               <li>2014版傳智播客php學習路線圖霸氣上線</li>
               <li>IT教師的福音,專教技術乾貨的大學教材震撼首發</li>
            </ul>
         </div>
         <div class="tbShow">
             <ul>
               <li>且行且珍惜,退伍兵鍾愛傳智播客</li>
               <li>聽聽學員講授傳智播客跟其他機構的對比</li>
               <li>基礎班學員為新學員指點迷津</li>
               <li>女漢子背後的故事:試聽課上被老師折服</li>
             </ul>
         </div>
         <div class="tbShow">
              <ul>
                <li>用汗水證明這是傳智播客的時代</li>
                <li>瓦工的"程式設計師"夢</li>
                <li>iso學習之路,撐起我的成長夢想</li>
                <li>催人淚下:一個電力工人轉身IT的經歷</li>
              </ul>
         </div>
         <div class="tbShow">
           <ul>
             <li>一個讓老程式設計師都汗顏的應屆生</li>
             <li>草根學員從求知走向崗位的蛻變故事</li>
             <li>我與程式設計的"愛恨情仇"</li>
             <li>狂風暴雨之後才是最燦爛的彩虹</li>
           </ul>
         
       </div>
      </div>

  </div>
</bdy>
</html>
<script type="text/javascript">
  var page=1;
   var $tbShow=$(".tbShow");
   var $span=$("#tabHead>span");
   var timer=null;
 var key=true;
   function changeAuto(){
   if(key==false) return ;
     $tbShow.filter(":visible").hide();
     $span.eq(page-1).addClass("current").siblings().removeClass("current");
     $tbShow.eq(page-1).fadeIn(400,function(){
      page++;if(page>4) page=1;
       clearTimeout(timer);
      timer=setTimeout(changeAuto,3000);});
     
 }
   changeAuto();
$span.each(function(index){

    $(this).hover(function(){
        page=index+1;
      clearTimeout(timer);
      changeAuto();
      key=false;
      
      

    },function(){key=true;clearTimeout(timer);changeAuto()})


});

</script>