基于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 相关文章推荐
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
javascript与有限状态机详解
May 08 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 Javascript
swiperjs实现导航与tab页的联动
Dec 13 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绕过open_basedir限制操作文件的方法
2018/06/10 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
Python生成随机验证码的两种方法
2015/12/22 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
大学生毕业自我鉴定范文
2013/11/03 职场文书
八项规定对照检查材料
2014/08/31 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers