<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery定位滚动tab选项卡特效 - 网页模板</title>
<style>
::-webkit-scrollbar-track-piece{width:13px;border-right:1px solid #EEE;border-left:1px solid #e4e4e4;background-color:#f0f0f0;background-image:-webkit-linear-gradient(left,#f0f0f0,#FFF)}
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-thumb{position:relative;min-height:25px;border-radius:9999px;background-color:#c2c2c2;background-clip:padding-box}
::-webkit-scrollbar-thumb:vertical{border-top:0 solid transparent;border-right:2px solid transparent;border-bottom:0 solid transparent;border-left:3px solid transparent}
::-webkit-scrollbar-thumb:horizontal{border-top:3px solid transparent;border-right:0 solid transparent;border-bottom:2px solid transparent;border-left:0 solid transparent}
::-webkit-scrollbar-thumb:hover{background-color:#999;}
::-webkit-scrollbar-thumb:active{background-color:#7d7d7d}
*{margin:0;padding:0;list-style:none;border:none;}
body{font:normal 12px/normal '宋体';}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
/*星期更新*/
.weeks{ width:500px; height:250px;margin:100px auto;border:1px solid #555;background:url(images/body_bg.gif) repeat;}
.weekItem{width:500px;height:30px;border-bottom:2px solid #444;}
.weekItem li{float:left;height:30px;width:71px;line-height:30px;text-align:center;cursor:pointer;overflow:hidden;}
.weekItem li.on{background:#444;color:#fff;width:74px;}
.weekItem li.hover{background:#555;color:#fff;}
.box01_c{width:500px;height:208px; padding:10px 0 0px 0;position:relative;overflow:auto;}
.box01_c dl{background:url("images/weeksbg.png") no-repeat 5px 0px;padding:0 10px 10px 25px;line-height:26px;}
.box01_c dl dt{color:#999;line-height:1;padding-bottom:10px;}
.box01_c dl dd{height:26px;overflow:hidden;}
.box01_c dl dd a{color:#282828;}
.box01_c dl dd span{float:right;color:#999;}
.box01_c dl dd span.today{color:#f60;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
function week_init(){
$("#weektab li").each(function(i){
$(this).click(function(){week_click(i);}).hover(function(){$(this).addClass('hover');},function(event){$(this).removeClass('hover');});
});
var w = new Date().getDay();
if (w==0){ w=6;} else {w=w-1;}
week_click(w);
$("#weekcon dl:last").css({"padding-bottom":"0","margin-bottom":"10px"});
}
function week_click(num){
$("#weektab li").removeClass('on').eq(num).addClass('on');
$curdl=$("#weekcon dl").eq(num);
var posi=$curdl.position();
$("#weekcon").animate({scrollTop:posi.top},200);
}
$(function(){
week_init();
});
</script>
</head>
<body>
<div class="weeks">
<ul class="weekItem" id="weektab">
<li>周一</li>
<li>周二</li>
<li>周三</li>
<li>周四</li>
<li>周五</li>
<li>周六</li>
<li>周日</li>
</ul>
<div class="box01_c" id="weekcon">
<div style="position:relative;">
<dl>
<dt>周一</dt>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
</dl>
<dl>
<dt>周二</dt>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
</dl>
<dl>
<dt>周三</dt>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
</dl>
<dl>
<dt>周四</dt>
<dd><span class="today">今日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
</dl>
<dl>
<dt>周五</dt>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd><span>11-3日更新</span><a href="http://www.moobnn.com">网页模板 - 免费网页模板下载网(www.moobnn.com)</a></dd>
<dd
jQuery定位滚动tab选项卡特效.zip
版权申诉
118 浏览量
2022-11-20
22:08:02
上传
评论
收藏 76KB ZIP 举报
芝麻粒儿
- 粉丝: 5w+
- 资源: 2万+