代码简介：
这个可是比较经典的选项卡啊，不但会自动播放，而且样式也很经典，基于jquery1.3.2的选项卡，结合了淡入淡出物资，感觉挺棒噢，不过代码稍嫌多，希望老手把代码优化一下哦。
代码内容：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery打造一个会自动播放样子也很经典的选项卡tab_网页代码站(www.webdm.cn)</title>
<script type="text/javascript" src="http://www.webdm.cn/themes/script/jquery.js"></script>
<style type="text/css">
body{font-size:9pt}
.tab{500px;border:#ccc 1px solid;margin:100px;}
.tab dl dt{ border-bottom:#ccc 1px solid;height:25px;background:#f1f1f1; margin-bottom:-1px;}
.tab dl dt a{float:left;display:block;cursor:pointer;60px;height:25px;line-height:25px;text-align:center;background:#f1f1f1;color:#000;}
.tab dl dt a.tabActive{background:#fff;color:#333;font-weight:bold;border-bottom:1px solid #fff;position:relative;border-right:1px solid #ccc;border-left:1px solid
#ccc;}
.tab dl dd{padding:10px;height:200px; clear:both;}
</style>
</head>
<body>
<script type="text/javascript">
// 选项卡
$(function(){
$(".tab dl dt>a:first").addClass("tabActive");
$(".tab dl dd ul").not(":first").hide();
$(".tab dl dt>a").unbind("click").bind("click", function(){
$(this).siblings("a").removeClass("tabActive").end().addClass("tabActive");
var index = $(".tab dl dt>a").index( $(this) );
$(".tab dl dd ul").eq(index).siblings(".tab dl dd ul").hide().end().fadeIn("slow");
});
});
</script>
<script type="text/javascript">
// 自动轮换选项卡
$(document).ready(function(){
$('.tab dl dt a:first').addClass('tabActive');
$('.tab dl dd ul:first').css('display','block');
autoroll();
hookThumb();
});
var i=-1; //第i+1个tab开始
var offset = 2500; //轮换时间
var timer = null;
function autoroll(){
n = $('.tab dl dt a').length-1;
i++;
if(i > n){
i = 0;
}
slide(i);
timer = window.setTimeout(autoroll, offset);
}
function slide(i){
$('.tab dl dt a').eq(i).addClass('tabActive').siblings().removeClass('tabActive');
$('.tab dl dd ul').eq(i).fadeIn("slow").siblings('.tab dl dd ul').hide();
}
function hookThumb(){
$('.tab dl dt a').hover(
function () {
if (timer) {
clearTimeout(timer);
i = $(this).prevAll().length;
slide(i);
}
},
function () {
timer = window.setTimeout(autoroll, offset);
this.blur();
return false;
}
);
}
</script>
<!-- 选项卡 -->
<div class="tab">
<dl>
<dt><a>选项</a><a>菜单</a><a>经典</a><a>标准</a></dt>
<dd>
<ul>欢迎您</ul>
<ul>Welcome To OurSite</ul>
<ul>你认识我吗？：</ul>
<ul>我们可以认识一下么？</ul>
</dd>
</dl>
</div>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</body>
</html>
代码来自：http://www.webdm.cn/webcode/e2ccd3a1-28d8-4d9d-bff0-1cd68c2b7525.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery打造一个会自动播放样子也很经典的选项卡tab_网页代码站(www.webdm.cn)</title>
<script type="text/javascript" src="http://www.webdm.cn/themes/script/jquery.js"></script>
<style type="text/css">
body{font-size:9pt}
.tab{500px;border:#ccc 1px solid;margin:100px;}
.tab dl dt{ border-bottom:#ccc 1px solid;height:25px;background:#f1f1f1; margin-bottom:-1px;}
.tab dl dt a{float:left;display:block;cursor:pointer;60px;height:25px;line-height:25px;text-align:center;background:#f1f1f1;color:#000;}
.tab dl dt a.tabActive{background:#fff;color:#333;font-weight:bold;border-bottom:1px solid #fff;position:relative;border-right:1px solid #ccc;border-left:1px solid
#ccc;}
.tab dl dd{padding:10px;height:200px; clear:both;}
</style>
</head>
<body>
<script type="text/javascript">
// 选项卡
$(function(){
$(".tab dl dt>a:first").addClass("tabActive");
$(".tab dl dd ul").not(":first").hide();
$(".tab dl dt>a").unbind("click").bind("click", function(){
$(this).siblings("a").removeClass("tabActive").end().addClass("tabActive");
var index = $(".tab dl dt>a").index( $(this) );
$(".tab dl dd ul").eq(index).siblings(".tab dl dd ul").hide().end().fadeIn("slow");
});
});
</script>
<script type="text/javascript">
// 自动轮换选项卡
$(document).ready(function(){
$('.tab dl dt a:first').addClass('tabActive');
$('.tab dl dd ul:first').css('display','block');
autoroll();
hookThumb();
});
var i=-1; //第i+1个tab开始
var offset = 2500; //轮换时间
var timer = null;
function autoroll(){
n = $('.tab dl dt a').length-1;
i++;
if(i > n){
i = 0;
}
slide(i);
timer = window.setTimeout(autoroll, offset);
}
function slide(i){
$('.tab dl dt a').eq(i).addClass('tabActive').siblings().removeClass('tabActive');
$('.tab dl dd ul').eq(i).fadeIn("slow").siblings('.tab dl dd ul').hide();
}
function hookThumb(){
$('.tab dl dt a').hover(
function () {
if (timer) {
clearTimeout(timer);
i = $(this).prevAll().length;
slide(i);
}
},
function () {
timer = window.setTimeout(autoroll, offset);
this.blur();
return false;
}
);
}
</script>
<!-- 选项卡 -->
<div class="tab">
<dl>
<dt><a>选项</a><a>菜单</a><a>经典</a><a>标准</a></dt>
<dd>
<ul>欢迎您</ul>
<ul>Welcome To OurSite</ul>
<ul>你认识我吗？：</ul>
<ul>我们可以认识一下么？</ul>
</dd>
</dl>
</div>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</body>
</html>
代码来自：http://www.webdm.cn/webcode/e2ccd3a1-28d8-4d9d-bff0-1cd68c2b7525.html