tab选项卡，不带自动切换定时器
<!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(){
// 清除定时器,只有在500ms后执行
if(timer){
clearTimeout(timer);
timer=null;
}
// 用that这个变量来引用当前划过的li
var that=this;
// 延迟半秒执行
timer=setTimeout(function(){
for (var j=0; j<lis.length;j++) {
lis[j].className='';
divs[j].style.display='none';
}
lis[that.id].className='select';
divs[that.id].style.display='block';
},100); } } }
</script>
<body>
<div class="notice" id="notice">
<div id="notice_tit" class="notice_tit">
<ul>
<li>
<a href="#">公告</a>
</li>
<li>
<a href="#">规则</a>
</li>
<li>
<a href="#">论坛</a>
</li>
<li>
<a href="#">安全</a>
</li>
<li class="select">
<a href="#">公益</a>
</li>
</ul>
</div>
<div class="notice_con" id="notice_con">
<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> <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: block;">
<!--<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选项卡，不带自动切换定时器的更多相关文章
- tab选项卡，带自动播放
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...
- jquery Tab默认情况下自动切换
<!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Conten ...
- jquery tab选项卡、轮播图、无缝滚动
最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...
- html+css+jQuery+JavaScript实现tab自动切换功能
tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- HTML+JS+DOM【选项卡自动切换】
最终效果图(鼠标无操作会自动切换选项卡): <!DOCTYPE html> <html> <head> <meta charset="gb2312& ...
- bootstrap tab切换如何让鼠标移动自动切换内容
bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移 ...
- iOS开发-iPad侧边栏Tab选项卡切换
Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android中的底部导航栏的切换,iPad尺寸大了一些,导航的栏目放在侧边会显示的更好耐看一些.选 ...
- 微信小程序Tab选项卡切换大集合
代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- tab切换效果 网站中的图片自动切换
网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...
随机推荐
- java 8时间使用LocalDateTime,ZonedDateTime,LocalDate
前言 java 8的时间已经能够满足日常的使用,也方便理解.joda-time作为一个有优秀的时间组件也不得不告知使用者在java 8以后使用自带的时间 LocalDateTime以及ZonedDat ...
- jsp 防止表单多次提交
1:首先java 后台代码生成一个token,然后保存到jsp 页面的一个隐藏控件并且保存到set session中 */ @RequestMapping("/yuDengJi") ...
- http请求常见的状态码
状态码是开发者需要了解的一项内容,日常开发中浏览器会返回给我们一些状态码,然后我们可以根据状态码所代表的含义进行问题解决. 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. 100 ...
- COGS 2294. [HZOI 2015] 释迦
额,其实就是裸的三模数NTT,上一篇已经说过了 哦,还有一个就是对乘起来炸long long的数取模,用long double之类的搞一下就好,精度什么的,,(看出题人心情??) #include&l ...
- django的404，500错误自定义页面的配置
django404,500错误自定义页面: 1.设置settings文件 DEBUG = False ALLOWED_HOSTS = ['127.0.0.1', 'localhost']或者ALLOW ...
- DatePicker和DatePickerDialog的使用
activity_main.xml: <Button android:id="@+id/showDatePickerButton" android:text="@s ...
- 嵊州普及Day5T1
题意:有n个商店,自家商店的定价不可高于任何一家商店定价,求自家商店最高定价. 思路:拿个变量打擂台即可,不用解释太多. 见代码: #include<iostream> #include& ...
- 玩玩负载均衡---在window与linux下配置nginx
最近有些时间,开始接触负载均衡方面的东西,从硬件F5再到Citrix Netscalar.不过因为硬件的配置虽然不复杂,但昂贵的价格也让一般用户望而却步(十几万到几十万),所以只能转向nginx, ...
- mybatis insert后返回主键ID
需求: mybatis 在添加记录时需要获取到记录主键id id=0 无法获取主键id的值 在插入方法中添加如下属性和相应的值 <insert useGeneratedKeys="t ...
- 在Anaconda3环境下安装并切换 Tensorflow 2.0 环境
背景 Anaconda切换各种环境非常方便,现在我们就来介绍一下如何使用anaconda安装tensorflow环境. anaconda v3.5 from 清华镜像站 tensorflow v2.0 ...