jquery tab标签页的制作


Posted in Javascript onMay 10, 2010

这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟,这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃,用到setTimeout函数,主要用到已下的事件

1 $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法

2 mouseover事件,

还有就是关键的css样式编写,控制显示的样式,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>tab </TITLE> 
<link rel="stylesheet" type="text/css" href="css/tab.css"> 
<script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="js/tab.js"></script> 
</HEAD> <BODY> 
<ul id="ularea"> 
<li class="listli">标签1</li> 
<li >标签2</li> 
<li >标签3</li> 
</ul> 
<div class="divarea">内容1</div> 
<div>内容2</div> 
<div>内容3</div> 
</BODY> 
</HTML>

接下来就是控制样式的css
ul ,li { margin:0px; 
padding:0px; 
list-style:none; 
} 
li { float:left; 
background-color:#66CC00; 
margin-right:2px; //这个是设置标签之间的间距 
padding:5px; 
border:1px solid white; 
height:20px; 
color:white; } 
.listli { background-color:#663333; 
border:1px solid #663333; 
} 
div { clear:left; 
width:300px; 
height:100px; 
background-color:#663333; 
border-top:0px; 
color:white; 
display:none; 
} 
.divarea { display:block; }

下来就是编写控制滑动的js
//定义全局变量 
var timeout; 
$(document).ready(function(){ 
//找到所有的li标签 
$("li").each(function(index){ $(this).mouseover(function(){ 
//滑动门都要设置一个延迟时间,避免用户疯狂移动鼠标,导致服务器崩溃,这个很重要 
timeout =setTimeout(function(){ 
$("div.divarea").removeClass("divarea"); 
$("li.listli").removeClass("listli"); 
// $("div").eq(index).addClass("divarea"); //另一种写法是:$(div:eq(index)).addClass("divarea"); 
$("div:eq("+index+")").addClass("divarea"); 
$("li").eq(index).addClass("listli"); 
}, 
320); 
$(this).mouseout(function(){ 
clearTimeout(timeout); 
}); 
}); 
}); 
});
Javascript 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
JSONP基础知识详解
Mar 19 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
JavaScript实现点击图片换背景
Nov 20 Javascript
JS监听Esc 键触发事键
Apr 14 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 #Javascript
js 小数取整的函数
May 10 #Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 #Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 #Javascript
JavaScript几种形式的树结构菜单
May 10 #Javascript
js function使用心得
May 10 #Javascript
javascript 模式设计之工厂模式详细说明
May 10 #Javascript
You might like
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
python多线程用法实例详解
2015/01/15 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Python和Go语言的区别总结
2019/02/20 Python
Django框架实现的分页demo示例
2019/05/25 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
Python接口测试get请求过程详解
2020/02/28 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
《赵州桥》教学反思
2014/02/17 职场文书
公务员考察材料
2014/12/23 职场文书
端午节活动总结报告
2015/02/11 职场文书
小学总务工作总结
2015/08/13 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL