基于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 相关文章推荐
Node调试工具JSHint的安装及配置教程
May 27 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
微信小程序之GET请求的实例详解
Sep 29 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
layui表格设计以及数据初始化详解
Oct 26 Javascript
JS实现网页烟花动画效果
Mar 10 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
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
python网络编程学习笔记(四):域名系统
2014/06/09 Python
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
python简单区块链模拟详解
2019/07/03 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
十八大感想感言
2014/02/10 职场文书
2015年人事科工作总结
2015/04/28 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
pandas数值排序的实现实例
2021/07/25 Python
SQL中的连接查询详解
2022/06/21 SQL Server
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python