动感TAB标签页的JS制作-优快云博客

1.HTML基本结构：

<div id="middle_top_right">     
<div id="mydt"><a class="tabActive">今日热门文章</a><a>本周热门文章</a><a>本月热门文章</a></div>
<div id="my_hot" class="hidden">
<div class="myul" style="display:block;">  
<div class="hot_div">                                        

</div>                                                                                                    
</div>
<div class="myul" style="display:none;">
<div class="hot_div">                                        

</div>                                                                                                    
</div>  
<div class="myul" style="display:none;">
<div class="hot_div">                                        

</div>                                                                                                    
</div>       
</div>             
</div>

这里分成三个TAB标签，当然你需要更多那只需要增加myul的DIV就可以了

2.CSS的制作

下面是我自己弄的CSS，你可以根据自己的情况做更改

#middle_top_right { float:right;width:327px;border-left: 1px solid #0099CC; border-right:1px solid #0099CC; border-bottom:2px solid #0099CC;margin:0px auto auto 0px;height:372px;}
#my_hot {position:relative;top:5px;}
#mydt{ height:32px;position:relative;top:0px;font-weight:bold;background-color:#0099CC;}
#mydt a{float:left;position:relative;left:15px;display:block;cursor:pointer;width:100px;height:32px;line-height:32px;text-align:center;background: #0099CC;color:#fff;font-size:14px;}
#mydt a.tabActive{background:#fff;font-weight:bold;position:relative;color:red;font-size:14px;}
.myul{position:relative;left:0px;}
.hot_div {position:relative;left:15px;width:320px;height:110px;}
.top_small_div {float:left;width:100px;height:100px;margin:auto auto auto 2px ;}
.top_small_img {width:80px;height:80px;border:2px solid #EAfAFA;padding:2px;}
.top_small_text {display:block;width:80px; height:20px;line-height:20px;overflow:hidden;text-align:center;}
.vertical_space {height:5px;}
.hidden { display:none;}

3.JS脚本

下面就是JS脚本了，仔细看吧，用了jquery，你还得在你的HTML文件里加上jquery

<script src="http://www.playtigers.com/hbcms/script/jquery/jquery_1.3.1.js" type="text/javascript"></script>

$(function(){
 $("#mydt>a:first").addClass("tabActive");
 $(".myul").not(":first").hide();
 $("#mydt>a").unbind("click").bind("click", function(){
     $(this).siblings("a").removeClass("tabActive").end().addClass("tabActive");
var index = $("#mydt>a").index( $(this) );
     $(".myul").eq(index).siblings(".myul").hide().end().fadeIn("slow");
   });
});

$(document).ready(function(){
 $('#mydt a:first').addClass('tabActive');
 $('.myul:first').css('display','block');
 autoroll();
 hookThumb();
});
var ai=-1; //第ai+1个tab开始
var offset = 5000; //轮换时间
var timer = null;
function autoroll(){
 nn = $('#mydt a').length-1;
 ai++;
if(ai > nn){
 ai = 0;
 }
 slide(ai);
    timer = window.setTimeout(autoroll, offset);
 }
function slide(ai){
 $(' #mydt a').eq(ai).addClass('tabActive').siblings().removeClass('tabActive');
 $('.myul').eq(ai).fadeIn("slow").siblings('.myul').hide();
 }
function hookThumb(){    
 $('#middle_top_right').hover(
function () {
if (timer) {
                clearTimeout(timer);
    ai = $(this).prevAll().length;
             slide(ai); 
            }
  },
function () {
            timer = window.setTimeout(autoroll, offset);  
this.blur();            
return false;
  }
); 
}