实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动Tab切换</title>
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="static/style.css">
<script type="text/javascript" src="static/js/jquery.js"></script>
</head>
<body>
<div id="notice">
<div id="notice_tit">
<ul>
<li class="select">
<a href="javascript:;">公告</a>
</li>
<li>
<a href="javascript:;">规则</a>
</li>
<li>
<a href="javascript:;">论坛</a>
</li>
<li>
<a href="javascript:;">安全</a>
</li>
<li>
<a href="javascript:;">公益</a>
</li>
</ul>
</div>
<div id="notice_con">
<div class="mod">
<ul>
<li>
<a href="javascript:;">四川举行烈士悼念活动 ***李克强韩正敬献花圈</a>
</li>
<li>
<a href="javascript:;">在典故中弄懂中国特色社会主义的关键问题</a>
</li>
<li>
<a href="javascript:;">壮丽70年·奋斗新时代 一带一路专题 世园会</a>
</li>
<li>
<a href="javascript:;">中国已在这个链条上占主导地位 媒体:美国坐不住了</a>
</li>
</ul>
</div>
<div class="mod" style="display: none">
<ul>
<li>
<a href="javascript:;">个别外国人士对***非法"占中"案宣判发表评论，外交部回应</a>
</li>
<li>
<a href="javascript:;">玉兔二号结束“午休” 继续开展第四月昼工作</a>
</li>
<li>
<a href="javascript:;">金三银四"招聘季：上海薪资最高，这个城市最缺人</a>
</li>
<li>
<a href="javascript:;">省委书记亲自调度的重大涉黑案，他竟然是保护伞</a>
</li>
</ul>
</div>
<div class="mod" style="display: none">
<ul>
<li>
<a href="javascript:;">中国首位女空降兵再次向家乡转账700万 完成捐千万积蓄心愿</a>
</li>
<li>
<a href="javascript:;">故宫新老院长“同框”亮相，卸任后第一天两人就在雨中同游</a>
</li>
<li>
<a href="javascript:;">新任故宫博物院院长任文旅部党组成员，明确为副部长级</a>
</li>
<li>
<a href="javascript:;">北京人的时间去哪儿了？上班族工作时间十年增加56分钟</a>
</li>
</ul>
</div>
<div class="mod" style="display: none">
<ul>
<li>
<a href="javascript:;">民航局：将接受美方邀请?参与波音737MAX安全评估</a>
</li>
<li>
<a href="javascript:;">狂骂韩国瑜25分钟中气十足 “蓝委”提案把陈水扁关回监狱</a>
</li>
<li>
<a href="javascript:;">斯里兰卡独立后首条新建铁路通车，由中方承建 外交部回应</a>
</li>
<li>
<a href="javascript:;">日媒：被偷运的"和牛"***在中国卖了37.38万元</a>
</li>
</ul>
</div>
<div class="mod" style="display: none">
<ul>
<li>
<a href="javascript:;">伊朗总统鲁哈尼：若美国持续施压，伊朗将重启铀浓缩离心机</a>
</li>
<li>
<a href="javascript:;">德媒：围堵失败后，美国放弃施压德国禁用华为5G技术</a>
</li>
<li>
<a href="javascript:;">董明珠今年65岁了，格力控股权转让到底有何玄机？</a>
</li>
<li>
<a href="javascript:;">时隔两年，这家“每天都得赚3亿”的公司终于迎来掌门人</a>
</li>
</ul>
</div>
</div>
</div>
<script>
var noticeTit=document.getElementById('notice_tit');
var noticeCon=document.getElementById('notice_con');
var title=noticeTit.getElementsByTagName('li');
var con=noticeCon.getElementsByClassName('mod');
var num=0;
var timer=null;
function autoPlay(){
num++;
if(num==title.length){
num=0;
}
showTab(num);
}
function showTab(i){
for(var j=0;j<con.length;j++){
con[j].style.display='none';
title[j].className='';
}
con[i].style.display='block';
title[i].className='select';
}
for(var i=0;i<title.length;i++){
title[i].index=i;
title[i].onmouseenter=function(){
clearInterval(timer);
showTab(this.index);
num=this.index;
}
title[i].onmouseleave=function(){
timer=setInterval(autoPlay,2000);
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
