<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<title>Tab切换</title>
<link rel="stylesheet" type="text/css" href="css/tab.css" />
</head>
<script type="text/javascript">
function $(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
};
window.onload = function() {
//标签的索引
var index = 0;
var timer = null;
var lis = $('notice_tit').getElementsByTagName('li');
divs = $('notice_con').getElementsByTagName('div');
if(lis.length != divs.length)
return;
// 遍历每一个页签并绑定事件
for(var i = 0; i < lis.length; i++) {
lis[i].id = i;
lis[i].onmouseover = function() {
clearInterval(timer);
changeoption(this.id);
}
// 自动播放
lis[i].onmouseout = function() {
timer = setInterval(autoplay, 3000);
}
}
if(timer) {
clearInterval(timer);
timer = null
}
timer = setInterval(autoplay, 3000);
function autoplay() {
index++;
if(index >= lis.length) {
index = 0
}
changeoption(index)
}
function changeoption(curIndex) {
for(var j = 0; j < lis.length; j++) {
lis[j].className = '';
divs[j].style.display = 'none';
}
index = curIndex;
lis[curIndex].className = 'select';
divs[curIndex].style.display = 'block';
}
}
</script>
<body>
<div class="notice" id="notice">
<div id="notice_tit" class="notice_tit">
<ul>
<li class="select">
<a href="#">公告</a>
</li>
<li>
<a href="#">规则</a>
</li>
<li>
<a href="#">论坛</a>
</li>
<li>
<a href="#">安全</a>
</li>
<li>
<a href="#">公益</a>
</li>
</ul>
</div>
<div class="notice_con" id="notice_con">
<div class="mod" style="display: block;">
<ul>
<li>
<a href="#">张勇：快乐足球</a>
</li>
<li>
<a href="#">淘宝之星</a>
</li>
<li>
<a href="#">爱心品牌</a>
</li>
<li>
<a href="#">名公益机构</a>
</li>
</ul>
</div>
<div class="mod" style="display: none;">
<ul>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">张勇：快乐足球</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">张勇：快乐足球</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">张勇：快乐足球</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">张勇：快乐足球</a>
</li>
</ul>
</div>
<div class="mod" style="display: none;">
<ul>
<li>
<a href="#">张勇：快乐足球</a>
</li>
<li>
<a href="#">张勇：快乐足球</a>
</li>
<li>
<a href="#">张勇：快乐足球</a>
</li>
<li>
<a href="#">张勇：快乐足球</a>
</li>
</ul>
</div>
<div class="mod" style="display: none;">
<ul>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">规范的股份</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">发个梵蒂冈讽德诵功</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">规范化个地方</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">张勇：快乐足球</a>
</li>
</ul>
</div>
<div class="mod" style="display: none;">
<ul>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">er</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">发个梵蒂冈讽德诵功</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">规范化个地方</a>
</li>
<li>
<span>
[<a href="#">通知</a>]
</span>
<a href="#">张勇：快乐足球</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
//css样式
* {
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}
.notice {
width: 298px;
height: 98px;
margin: 10px;
border: 1px solid #999;
overflow: hidden;
}
.notice_tit {
height: 27px;
position: relative;
background: #f7f7f7;
}
.notice_tit ul {
position: relative;
width: 301px;
left: -1px;
}
.notice_tit ul li {
float: left;
width: 58px;
height: 26px;
line-height: 26px;
text-align: center;
overflow: hidden;
background: #FFFFFF;
border-bottom: 1px solid #CCCCCC;
padding: 0 1px;
background: #EEEEEE;
}
.notice ul li a:link,.notice ul li a:visited{
text-align: center;
text-decoration: none;
color: #666;
}
.notice ul li a:hover{color: #f90;}
.notice_tit ul li.select{
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #999999;
padding: 0;
font-weight: bold;
}
/*切换内容*/
.notice_con .mod{margin: 10px 10px 10px 19px;}
.notice_con .mod ul li{
float: left;width: 134px;
height: 25px;
overflow: hidden;
line-height: 25px;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
}
