可延迟的选项卡切换

带有一些延迟的选项卡效果更佳

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0}
.notice{
	height:98px;
	width:298px;
	border:1px solid #eee;
	overflow:hidden;
	}
.notice-tit{
	height:27px;
	position:relative;
	}
.notice-tit ul{
	list-style:none;
	position:absolute;
	width:301px;
	left:-1;
	}
.notice-tit ul li{
	float:left;
	width:58px;
	height:26px;
	padding:0 1px;
	text-align:center;
	line-height:26px;
	overflow:hidden;
	background:#F7F7F7;
	border-bottom:1px solid #eee;
	}
.notice-tit ul li.select{
	background:#fff;
	border-bottom-color:#fff;
	border-left:1px solid #eee;
	border-right:1px solid #eee;
	padding:0;
	}
.notice ul li a:link,.notice ul li a:visited{
	text-decoration:none;
	color:#000;
	}
.notice ul li a:hover{
	color:#f90;
	}
.notice-con .mod{
	margin:10px 15px;
	}
.notice-con .mod ul li{
	float:left;
	width:134px;
	height:25px;
	overflow:hidden;
	}
</style>
<script>
function $(id){
	return typeof id === 'string'?document.getElementById(id):id;
	}
window.onload = function(){
	//标签索引
	var index = 0;
	var timer = null;
	//获取鼠标滑过或点击的标签和要切换内容的元素
	var titles=$('notice-tit').getElementsByTagName('li');
	    divs=$('notice-con').getElementsByTagName('div');
	if(titles.length != divs.length)
	return;
	//遍历titles下的所有li
	for(var i=0;i<titles.length;i++){
		titles[i].id=i;
		titles[i].onmouseover=function(){
			var that = this;
			//如果存在准备执行的定时器,立刻清除,只有当前停留5时间大于500ms时,才开始执行
			if(timer){
				clearTimeout(timer);
				timer = null;
				}
				//延迟半秒
				timer = window.setTimeout(function(){
					//清除li上的class
					for(var j=0;j<titles.length;j++){
						titles[j].className='';
						divs[j].style.display = 'none';
					}
					//设置当前高亮显示
					titles[that.id].className='select';
					divs[that.id].style.display = 'block';
					},500);
			}
	}
}
</script>
</head>

<body>
<div id="notice" class="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 id="notice-con" class="notice-con" >
    	<div class="mod" style="display:block">
    	<ul>
    		<li><a href="#">编写菜单效果1</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><a href="#">编写菜单效果2</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><a href="#">编写菜单效果3</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><a href="#">编写菜单效果4</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><a href="#">编写菜单效果5</a></li>
            <li><a href="#">编写菜单效果</a></li>
            <li><a href="#">编写菜单效果</a></li>
            <li><a href="#">编写菜单效果</a></li>
        </ul>
        </div>

    </div>
</div>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-20 18:49:07

可延迟的选项卡切换的相关文章

用html+css+js实现选项卡切换效果

文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90平老房焕发新生 新中式的酷色温情 66平撞色活泼家居

实现选项卡切换的三种方式

首先我用Jquery库实现了一个简单的效果, 只需要点击上面的导航标签即可切换下方内容,Html代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>tab切换</title> <style type="text/css"> *{padding:0;margin:0;f

js实现选项卡切换的三种方式

前两种主要实现一个选项卡的切换,第三种使用闭包看书,构造函数实现多个选项卡的切换: 1.第一种实现实现效果为: 实现代码为: <!doctype html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>tab切换</title> <style type="text/css

简单实用的网页选项卡切换特效

jquery图标选项卡特效_图标控制选项卡切换代码 jQuery时间轴滑动选项卡_横向和纵向滑动选项卡切换代码 jQuery tab选项卡切换插件和css3属性结合动画选项卡切换效果 jquery选项卡插件卷帘门滑动选项支持自动播放选项卡 jquery 选项卡插件jquery tab选项卡支持垂直选项卡滚动.水平选项卡滚动.自动选项卡切换等. jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡 jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过

Axure实现Tab选项卡切换功能

这几天用Axure画原型图的过程中,需要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以可以用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的Axure7.0为例,英语不太好的朋友可以先进行汉化(汉化的时候要注意版本,不同的版本,汉化文件也稍有差异). 具体实现步骤如下: 1.往页面中拖入一个动态面板部件: 2.给该动态面板部件添加几个状态: 操作方法为:双击该动态面板,点击左侧的加号添加状态,这里把四个添加的状态名称改为"选项卡1.选项

慕课编程题JS选项卡切换

Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框样式的时候,JS里会出现大量CSS代码,所以统一使用className切换是更好的选择,不同的class样式可以在CSS文件中设置.这样JS的任务只剩下区分onclick元素和其他元素这一项了. 我的第一反应是给<p>内容部分加上房产/家居/二手房的id,通过if判断id是否与触发onclick选

用js实现选项卡切换效果

这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class="selected">房产</li> <li>家居</li> <li>二手房</li></ul><div class="tab_box"> <div> 275万购昌平邻铁三居

Angular页面选项卡切换要注意的toggleClass

在第一,第二篇随笔中写到的选项卡切换,我回头看了看发现缺少了一个很重要的部分,那就是toggleClass. //在js控制器中必须写明指令,要不然在页面写了toggle-class="active"也是会报错的!!! .directive('toggleClass', function(){ return { restrict: 'A', scope: { toggleClass: '@' }, link: function(scope, element,attrs){ elemen

仿百度首页选项卡切换效果

效果:http://hovertree.com/texiao/jquery/71/ 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title> <base ta