<!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. 「Luogu P2060 [HNOI2006]马步距离」

    一道神奇的BFS 前置芝士 BFS(DFS):这次真的不是我懒,我也不知道DFS怎么写. STL中的set或者map. 具体做法 数据范围非常大,直接BFS肯定是一片黑色(指TLE,MLE),直接贪心 ...

  2. java学习-循环结构-查找算法-顺序查找

    今天回顾了简单算法,顺序查找.发现了数组出现重复数字,无法输出第二个位置就跳出循环了. 利用所学知识解决了.放上代码,同时在代码里给大家分享思路. 欢迎大神教导,欢迎指正. ; System.out. ...

  3. MySQL多实例安装（相同版本）

    本文以MySQL5.7为例,介绍在同一台机器下如何安装多个MySQL实例. 环境:RHEL 6.5 + MySQL 5.7 1.单实例MySQL安装 2.多实例MySQL配置 3.多实例MySQL初始 ...

  4. 1-8SpringBoot之切面AOP

    SpringBoot提供了强大AOP支持,我们前面讲解过AOP面向切面,所以这里具体AOP原理就补具体介绍: AOP切面主要是切方法,我们一般搞一些日志分析和事务操作,要用到切面,类似拦截器: @As ...

  5. spark on yarn container分配极端倾斜

    环境:CDH5.13.3  spark2.3 在提交任务之后,发现executor运行少量几台nodemanager,而其他nodemanager没有executor分配. 测试环境通过spark-s ...

  6. tensorflow实现线性模型和sklearn的线性模型比较

    自己用tensorflow实现了linear模型,但是和sklearn提供的模型效果相比,实验结果差了很多,所以尝试了修改优化算法,正则化,损失函数和归一化,记录尝试的所有过程和自己的实验心得. im ...

  7. CF 1198 A. MP3 模拟+滑动窗口

    A. MP3   题意:给你n个数,一个大小为8*I的容量,保存一个数需要多少容量取决于给定n个数的种类k,用公式 log2 k   计算,如果给定的容量不能保存所有数,选择减少数的种类来降低保存一个 ...

  8. Python学习笔记之基础篇（-）python介绍与安装

    Python学习笔记之基础篇(-)初识python Python的理念:崇尚优美.清晰.简单,是一个优秀并广泛使用的语言. python的历史: 1989年,为了打发圣诞节假期,作者Guido开始写P ...

  9. 第1节 IMPALA：3、impala软件的下载和linux磁盘的挂载

    1. impala安装软件下载: http://archive.cloudera.com/cdh5/repo-as-tarball/5.14.0/ 2. linux磁盘的挂载: [root@node0 ...

  10. 118.django中表单的使用方式

    表单 HTML中的表单: 从前端来说,表单就是用来将数据提交给服务器的,不管后台使用的是django还是php等其他的语言.只要把input标签放在form标签中,然后再添加一个提交的按钮,就可以将i ...