<!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. ADV-297 快速排序 java

    问题描述 用递归来实现快速排序(quick sort)算法.快速排序算法的基本思路是:假设要对一个数组a进行排序,且a[0] = x.首先对数组中的元素进行调整,使x放在正确的位置上.同时,所有比x小 ...

  2. jQuery EasyUI window窗口实例

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

  3. redis、mongodb、memcache安装好后设置开机自启动

    vim /etc/rc.d/rc.local /usr/local/mongodb/bin/mongod --smallfiles /usr/local/bin/redis-server/usr/lo ...

  4. Commons BeanUtils 中对Map的操作

    CSDN学院招募微信小程序讲师啦 程序员简历优化指南! [观点]移动原生App开发 PK HTML 5开发 云端应用征文大赛,秀绝招,赢无人机! Commons BeanUtils 中对Map的操作 ...

  5. [Struts]Token 使用及原理

      Struts Token 使用 1,先在一个Action中,调用saveToken(HttpServletRequest request)方法.然后转向带有表单的JSP页面. 2,在JSP页面提交 ...

  6. ttf格式文件

    TTF(TrueTypeFont):是一种字库名称.TTF文件:是Apple公司和Microsoft公司共同推出的字体文件格式.要使用的下载的字体文件只要把它(*.ttf)放到C:\WINDOWS\F ...

  7. greenplum 存储过程 索引信息

    涉及的索引表 参考:http://blog.nbhao.org/1539.html pg_index pg_indexes pg_stat_all_indexes # 记录当前数据库中所有的索引的使用 ...

  8. （四）Flex 布局教程和例子

    布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 1.flex-direction ...

  9. Day 26：Dom4j修改xml

    Dom4j:Writing a document to a file import java.io.File; import java.io.FileOutputStream; import org. ...

  10. Arch系linux配置Go开发环境

    1. 下载go $ sudo pacman -S go 下载后系统会将go安装在/usr/lib/go目录下 2. 配置一些环境变量 一共需要三个环境变量,分别为: GOROOT -> go语言 ...