简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > JavaScript实现tab自动切换
Blogger Information
Blog 20
fans 0
comment 0
visits 25110
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript实现tab自动切换
左手Leon的博客
Original
744 people have browsed it

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！