JS实现标签页效果(配合css)


Posted in Javascript onApril 03, 2013

实现的效果
JS实现标签页效果(配合css)
如上图所示为制作的标签页,我们想要实现的效果是当鼠标移到某一个标签的时候,在下面的内容区显示对应的内容,并且相应标签的颜色需要改变,如图中所示当前鼠标的位置在“标签1”上,则内容区域显示的内容为“我是内容1”,并且“标签1”的颜色要比“标签2”和“标签3”深一些,同样鼠标移到“标签2”和“标签3”的时候显示“我是内容2”和“我是内容3”。这样的效果是CSS和JS配合实现的。下面我们就来看看具体代码:

首先来看HTML代码

<!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=gb2312" /> 
<title>标签页效果</title> 
<link href="../CSS/tab.css" rel="stylesheet" type="text/css" /> 
<script language="JavaScript" type="text/javascript" src="../JS文件/jquery.js"></script> 
<script language="JavaScript" type="text/javascript" src="../JS文件/tab.js"></script> 
</head> 
<body> 
<ul id="tabfirst"> 
<li class="tabin">标签1</li> 
<li>标签2</li> 
<li>标签3</li> 
</ul> 
 <div id="contentnow" class="contentfirst contentin">我是内容1</div> 
<div id="contentnow" class="contentfirst">我是内容2</div> 
<div id="contentnow" class="contentfirst">我是内容3</div> 
</body> 
</html>

JS代码实现思路很简单,首先给每个标签项注册一个mouseover函数,当鼠标移到任何一个标签上的时候都会执行moveover函数体内的代码。函数体代码首先获取当前节点,将原来显示的内容进行隐藏,然后根据传入的节点index把对应于相应标签下的内容显示出来。在代码中我们可以看到除了对HTML中节点样式进行改动外还使用了setTimeout函数,该函数的作用是延迟函数的执行时间,下面代码中的延迟时间为300毫秒,也就是当鼠标移到标签后并不是立即执行而是延迟300毫秒后在执行,如果在300毫秒时间内鼠标移出标签区域则不再执行该代码。
$(document).ready(function(){ 
var timeoutid; 
$("#tabfirst li").each(function(index){ //每一个包装的li的JQuery对象都会执行function中的代码 
//index是当前执行这个function代码的li对应在所有li组成的数组中的索引值 
//有了index的值后,就可以找到当前标签对应的内容区域 
$(this).mouseover(function(){ 
var liNode = $(this); 
timeoutid = setTimeout(function(){ 
//将原来显示的内容进行隐藏 
$("div.contentin").removeClass("contentin"); 
//将原来有tabin属性的标签去掉tabin属性 
$("#tabfirst li.tabin").removeClass("tabin"); 
//将当前标签对应的内容区域显示出来 
$("div.contentfirst").eq(index).addClass("contentin"); 
//$("div.contentfirst:eq(" + index + ")").addClass("contentin"); 
//将当前标签增加tabin属性 
liNode.addClass("tabin"); 
},300); 
}).mouseout(function(){ 
clearTimeout(timeoutid); 
}); 
}); 
});

除了该效果外,我们还可以利用相同的原理给每个标签注册click函数,当点击每个标签的时候在原内容区域可以装载不同的页面或任意页面的一部分,有兴趣的话可以点击这里下载源码。该源码中包含了文中所提到的两种不同函数所实现的不同功能。
Javascript 相关文章推荐
理解Javascript_05_原型继承原理
Oct 13 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 #Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 #Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 #Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 #Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 #Javascript
JS获取浏览器版本及名称实现函数
Apr 02 #Javascript
js 火狐下取本地路径实现思路
Apr 02 #Javascript
You might like
PHPShop存在多个安全漏洞
2006/10/09 PHP
可以在线执行PHP代码包装修正版
2008/03/15 PHP
php重定向的三种方法分享
2012/02/22 PHP
smarty简单应用实例
2015/11/03 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python实现中文转换url编码的方法
2016/06/14 Python
Python 操作文件的基本方法总结
2017/08/10 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
python实现彩票系统
2020/06/28 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
python读写csv文件的方法
2019/08/13 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
夜大毕业生自我评价分享
2013/11/10 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
顶撞领导检讨书
2014/01/29 职场文书
淘宝活动策划方案
2014/02/06 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
装修施工安全责任书
2014/07/24 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
七年级英语教学反思
2016/02/15 职场文书
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android