<!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. stm32 解析sbus

    转载 https://blog.csdn.net/Brendon_Tan/article/details/89854751 STM32 Futaba SBUS协议解析1. S.BUS1.1 协议介绍 ...

  2. 在线配置raid

    Exit Code: 0x00 rpm -ivh MegaCli-8.07.14-1.noarch.rpm ls /opt/MegaRAID/MegaCli//opt/MegaRAID/MegaCli ...

  3. boost::thread demo

    #include <iostream> #include <boost/date_time/gregorian/gregorian.hpp> #include <boos ...

  4. SpringMVC controller中业务方法的参数、返回值

    业务方法的参数 业务方法的参数类型.参数个数是任意的,根据需要使用. 常见的参数类型: HttpServletRequest.HttpServletResponse.HttpSession    获取 ...

  5. 071、Java面向对象之使用private封装属性

    01.代码如下: package TIANPAN; class Book { // 定义一个新的类 private String title; // 书的名字 private double price ...

  6. GNS3 模拟免费ARP

    R2 : conf t int f0/0 no shutdown ip add 192.168.1.254 255.255.255.0 end R1 : conf t int f0/0 no shut ...

  7. 第2节 网站点击流项目(下)：6、访客visit分析

    0: jdbc:hive2://node03:10000> select * from ods_click_stream_visit limit 2;+--------------------- ...

  8. Noip2018普及组初赛试题解题报告

    解题思路: 一.单项选择题 (答案:DDDBBAAAABABBBB) 1.除D外,其余均为输入设备. 2.除D外,其余都等于(617)10 ,D选项为(619)10. 3.1MB=1024KB=102 ...

  9. 字符串题汇总(python3)

    1.最小编辑距离 假设有两个字符串s1和s2,计算通过增添.删除.替换三种操作后,从s1转变为s2所需要的操作次数. #coding=utf-8 class Solution: def editDis ...

  10. 使用gulp 进行ES6开发

    使用gulp 进行ES6开发 一.新建项目 项目结构如下: /app -- /js -- /css /dist -- /js -- /css -- index.html gulpfile.js 我们的 ...