基于JQuery的多标签实现代码


Posted in Javascript onSeptember 19, 2012

今天要分享的是基于JQuery实现的多标签的切换,JQuery就不用过多介绍了,网上一搜一大堆资料,当然这样的小示例也有很多,这里只是发表一些自己的想法。

下面是本次示例所使用的HTML页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JQueryProject1</title> 
<meta name="author" content="Frank_Ren" /> 
<link type="text/css" rel="stylesheet" href="css/myCSS.css" /> 
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> 
<script type="text/javascript" src="js/myJSFile.js"></script> 
<!-- Date: 2012-09-17 --> 
</head> 
<body> 
<div id="contenTab"> 
<ul> 
<li class="showTab"><a href="/">标签1</a></li> 
<li><a href="/">标签2</a></li> 
<li><a href="/">标签3</a></li> 
</ul> 
<div id="content"> 
<div class="showContent">这是内容1</div> 
<div>这是内容2</div> 
<div>这是内容3</div> 
</div> 
</div> 
</body> 
</html>

现在的页面还看不出有有标签的效果,所以为了使页面上出现标签效果,给一面添加一个CSS文件:
a{ 
display: block; 
text-decoration: none; 
color:white; 
} 
#contenTab ul{ 
list-style: none; 
padding:0px; 
margin:0px; 
} 
#content div.showContent{ 
line-height:100px; 
display: block; 
background-color:#B0C4DE; 
} 
.showTab{ 
background-color:#B0C4DE; 
border-bottom: 1px solid #B0C4DE; 
} 
div li{ 
background-color:#5F9EA0; 
border-bottom: 1px solid white; 
float: left; 
border-right: 1px solid white; 
color:black; 
height:30px; 
width:60px; 
line-height: 30px; 
text-align: center; 
} 
#content div{ 
background-color:#B0C4DE; 
display:none; 
clear: left; 
width:300px; 
height: 100px; 
}

到目前为止页面还只是静态页面,接下来就是最主要的的部分了,这部分就是实现通过鼠标移动来切换标签,实现动态页面,为了达到这个目的需要再添加一个JS文件,当然基于JQuery就必然少不了JQuery的JS文件,本示例使用的是最新的jquery-1.8.1.min.js,可以到JQuery的官网获得,下面是本次示例中实现标签切换的JS代码:
$(function(){ 
$("#contenTab li").each(function(){ 
var tab = $(this); 
var timeoutID; 
tab.hover(function(){ 
timeoutID = setTimeout(function(){ 
$(".showTab").removeClass("showTab"); 
$(".showContent").removeClass("showContent"); 
tab.addClass("showTab"); 
$($("#content div").get($("#contenTab li").index(tab))).addClass("showContent"); 
},300); 
},function(){ 
clearTimeout(timeoutID); 
}); 
}); 
});

到目前为止已经实现了多标签的切换。接下了记录下本次示例的几个注意事项:

1、为了实现当鼠标移到标签(也就是<li>)上让鼠标的形状变成手形,本次示例是通过将<li>里面的内容放在<a>里面来实现,当然还有跟简单的方法就是给<li>添加样式cursor: pointer;。

2、在JS代码中用到了var timeoutID = setTimeout(function,time),这是为了避免鼠标快速移动到来的误操作,time是延时的时间,function里面的就是延时time毫秒过后要执行的内容,也就是说鼠标移到标签上时不会实现立即切换的动作,而是要延时time毫秒过后才会响应切换的动作,如果鼠标在time毫秒之内离开了标签,就会执行clearTimeout(timeoutID),这样time毫秒之后就不会执行function里面的内容,这样就避免了鼠标快速移动带来的误操作。

今天就到这里了,希望对你会有所帮助。

Javascript 相关文章推荐
Javascript 写的简单进度条控件
Jan 22 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
JavaScript网页定位详解
Jan 13 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 #Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 #Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 #Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 #Javascript
You might like
PHP初学者头疼问题总结
2006/07/08 PHP
一些使用频率比较高的php函数
2008/10/03 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
JsRender for object语法简介
2014/10/31 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
js实现日历的简单算法
2017/01/24 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
表扬信格式
2014/01/12 职场文书
老人祝寿主持词
2014/03/28 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
融资租赁计划书
2014/04/29 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
初三英语教学反思
2016/02/15 职场文书
HTML常用标签超详细整理
2022/03/19 HTML / CSS