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> < ...
随机推荐
- 学习笔记（16）- InsuranceQA_zh
仓库地址:https://github.com/l11x0m7/InsuranceQA_zh Convolutional Neural Network for Chinese InsuranceQA ...
- TensorFlow基础二（Shape）
首先说明tf中tensor有两种shape,分别为static (inferred) shape和dynamic (true) shape,其中static shape用于构建图,由创建这个tenso ...
- Maven项目-Tomcat - 方法无法为jsp编译类ClassFormatException的解决
解决方法:
- Flask - 数据库相关
1. Flask-SQLAlchemy 1.1 参考: http://flask-sqlalchemy.pocoo.org/2.3/ https://github.com/janetat/flasky ...
- Flask - 多APP应用（不太重要）
1. 多APP应用 请求进来时,可以根据URL的不同,交给不同的APP处理.一般用蓝图也可以实现.一般不写多app应用. from werkzeug.wsgi import DispatcherMid ...
- 使MVC路由表无效
protected void Application_Start() { AreaRegistration.RegisterAllAreas(); WebApiConfig.Register(Glob ...
- C. Gas Pipeline DP
C. Gas Pipeline time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...
- onchange VS onblur
参考:https://zhidao.baidu.com/question/559052179.html
- 回顾PHP：第一章：PHP基础语法
第一章:PHP基础语法 一.常量: 1.1.define()函数:define(‘R’,’5’,’true’); //R:常量名,5:常量值,true:常量名对大小写不敏感,为false时表示对常量名 ...
- 如何确定Redis集群中各个节点的主从关系
1.首先通过命令(以192.168.203.141为例,-c代表集群的意思) ./redis-cli -h 192.168.203.141 -p 8001 -c 2.然后在输入 cluster no ...