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

}

　　

　　

tab选项卡，带自动播放的更多相关文章

  1. js原生选项卡（自动播放无缝滚动轮播图）二

    今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...

  2. EasyNVR H5无插件摄像机直播解决方案前端解析之：引用videojs无法自动播放

    关于videojs自动播放问题 播放流媒体多使用videojs来进行播放,videojs,本身自带自动播放属性: 通过添加autoplay(),来完成视频播放的自动加载: player = video ...

  3. 自动播放——幻灯片缓冲效果&&带Loading效果的图片切换&&移动效果（按轨迹移动）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 移动web：tab选项卡

    平常做移动端会用到tab选项卡,这和PC端有些区别,移动端是触摸滑动切换,PC端是点击.移入切换. 这里滑动切换就是一个移动端事件的应用,这里主要用到的触摸事件:touchstart.touchmov ...

  5. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

  6. Bootstrap之Carousel不能自动播放的解决办法(转)

    Bootstrap是一个非常好的css/javaScript框架,尤其对于移动端的自适应和适配能力都比较强. 用Bootstrap自带的Carousel写了一个图片轮播的广告部分,用js调用后却出现了 ...

  7. 解决ios下的微信打开的页面背景音乐无法自动播放

    后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监 ...

  8. 仿微博视频边下边播之滑动TableView自动播放-b

    Tips:这次的内容分为两篇文章讲述01.[iOS]仿微博视频边下边播之封装播放器 讲述如何封装一个实现了边下边播并且缓存的视频播放器.02.[iOS]仿微博视频边下边播之滑动TableView自动播 ...

  9. bootstrap建立响应式网站——tab选项卡

    1.bootstrap给我们提供了标签页 细细看了一下bootstrap的标签页源码,对tab选项卡有了更深的理解.其实说来也简单,以前自己写js和css时没有意识到整体的划分.就是分为两部分:一部分 ...

随机推荐

  1. 灵光一闪来个科普贴：Linux文件系统

    在计算机系统中,各种需要保存的信息都是以文件的形式存在的.文件管理是对系统信息资源的管理,是操作系统的一项重要功能. 1.文件与文件系统: 1.1文件: 文件是具有名字的一组相关信息的有序集合,存放在 ...

  2. JS截取腾讯视频和去除视频广告

    一:腾讯视频截取 H5视频播放除了video标签以外,还有iframe嵌套视频 项目需求是用户输入腾讯视频的html链接,如 https://v.qq.com/x/page/y0116k2vspw.h ...

  3. MyISAM/Innodb的区别

    MyISAM是MySQL的默认数据库引擎(5.5版之前).虽然性能极佳,而且提供了大量的特性,包括全文索引.压缩.空间函数等,但MyISAM不支持事务和行级锁,而且最大的缺陷就是崩溃后无法安全恢复.不 ...

  4. 解题报告：luogu P5536 【XR-3】核心城市

    题目链接:P5536 [XR-3]核心城市 这题是某次月赛题. 这题我完全是看标签猜的. 优先选择直径中点即可,这里重要的是互通,很容易想到用堆维护可选的,预处理直径和距叶节点距离即可(最近),实质上 ...

  5. 【高软作业3】：原型化系统 DevTools

    原型化系统:DevTools       密码:lcx 1. 这是一个什么样的平台? DevTools,可译为:开发者工具库.初衷是聚集各类开发工具,方便开发者获取:此外,大家可以分享自己的工具库与工 ...

  6. 如何关闭 Mac OS X EI Capitan 系统文件保护

    在修改 Mac OS X EI Capitan 系统的某些系统文件的过程中,你可能会遇到即使你加了 sudo 以管理员身份去操作页会被拒绝, 这是一个名为 SIP(System Integrity P ...

  7. windows制作动态链接库和使用二

    动态库的另一种制作方法: 不使用_declspec(dllexport)关键字,使用.def文件 //exportFun.def 文件名随意 EXPORT add @ //格式 函数名 @编号 < ...

  8. RocketMQ 单机部署（单master模式）

    一.为了快速了解rockmq,先搭建一个简单的单机版的rocketmq,前期准备:1.CentOS 7.6 64位(阿里云)(4G内存) 2.jdk1.8 3.maven 3.5.4 4.直接从官网上 ...

  9. vSphere中Storage vMotion的流程详解

    内容预览: 1. Storage vMotion的迁移方式 2. 影响Storage vMotion效率的因素 3. Storage vMotion的详细流程 企业部署虚拟化后,如果发现存储的性能出现 ...

  10. 解题报告：luogu P2678 跳石头

    题目链接:P2678 跳石头 很简单的二分查找,可悲的是我并不会. 不过题解贴心的写得很清楚(学会了套路) 二分一次判断一次,复杂度是\(O(nlogl)\),可以通过此题. \(Code:\) #i ...