<!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. java并发：初探消费者和生产者模式

    消费者和生产者模式 用继承Thread方式,用wait和notifyAll方法实现. 消费者和生产者模式的特点 1. 什么时候生产:仓库没有满的时候,生产者这可以生产,消费者也可以消费,仓库满的时候停 ...

  2. windowsService 程序

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  3. 洛谷 P4287 [SHOI2011]双倍回文题解

    前言 用了一种很奇怪的方法来解,即二分判断回文,再进行某些奇怪的优化.因为这个方法很奇怪,所以希望如果有问题能够 hack 一下. 题解 我们发现,这题中要求的是字符串 \(SS'SS'\),其中 \ ...

  4. 吴裕雄--天生自然JAVA面向对象高级编程学习笔记：包装类

    public class WrapperDemo01{ public static void main(String args[]){ int x = 30 ; // 基本数据类型 Integer i ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类："text-muted" 类的文本样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. python进阶强化学习

    最近学习了慕课的python进阶强化训练,将学习的内容记录到这里,同时也增加了很多相关知识. 主要分为以下九个模块: 基本使用 迭代器和生成器 字符串 文件IO操作 自定义类和类的继承 函数装饰器和类 ...

  7. POJ 2386 Lake Counting 八方向棋盘搜索

    Lake Counting Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 53301   Accepted: 26062 D ...

  8. 开发自己的 chart【转】

    Kubernetes 给我们提供了大量官方 chart,不过要部署微服务应用,还是需要开发自己的 chart,下面就来实践这个主题. 创建 chart 执行 helm create mychart 的 ...

  9. 51nod 1163：最高的奖励 优先队列

    1163 最高的奖励 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 有N个任务,每个任务有一个最晚结束时间以及一个对应的奖励.在结束时间之前完成该 ...

  10. Phoenix与HBase集成进行数据分析

    安装好Phoenix后配置环境变量 export PHOENIX_PATH=/opt/cloudera/parcels/APACHE_PHOENIX-4.14.0-cdh5.14.2.p0.3expo ...