Tab切換欄(jQuery方法實現)
阿新 • • 發佈：2018-11-10
<!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>