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 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
JavaScript 组件之旅(二)编码实现和算法
Oct 28 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 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
php SQL之where语句生成器
2009/03/24 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
Python3.6正式版新特性预览
2016/12/15 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
python支持多线程的爬虫实例
2019/12/21 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
python str字符串转uuid实例
2020/03/03 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
比利时家具购买网站:Home24
2019/01/03 全球购物
什么是Remote Module
2016/06/10 面试题
大学团支书的自我评价分享
2013/12/14 职场文书
军训考核自我鉴定
2014/02/13 职场文书
共产党员公开承诺书
2014/03/25 职场文书
2014年新生军训方案
2014/05/01 职场文书
上班离岗检讨书
2014/09/10 职场文书
化验室安全管理制度
2015/08/06 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
Pandas自定义选项option设置
2021/07/25 Python
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript