基于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有关的小细节
Apr 02 Javascript
form中限制文本字节数js代码
Jun 10 Javascript
javaScript Array(数组)相关方法简述
Jul 25 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 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设计模式 Adapter(适配器模式)
2011/06/26 PHP
php判断变量类型常用方法
2012/04/24 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
php实现简单文件下载的方法
2015/01/30 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
wxpython 学习笔记 第一天
2009/03/16 Python
python 获取字符串MD5值方法
2018/05/29 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
python线程池如何使用
2020/05/28 Python
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
编程用JAVA解析XML的方式
2013/07/07 面试题
汉语言文学毕业求职信
2014/07/17 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
格林童话读书笔记
2015/06/30 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript
详解MySQL的内连接和外连接
2023/05/08 MySQL