JQuery标签页效果实例详解


Posted in Javascript onDecember 24, 2015

本文实例讲述了JQuery标签页效果实现方法。分享给大家供大家参考,具体如下:

第一个标签页中鼠标滑过显示不同的标签页,第二个标签页中点击不同标签加载其他页面中的内容,加载等待的图片缓慢隐藏,效果图如下:

JQuery标签页效果实例详解

/WebRoot/4.Tab.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>JQuery实例4:标签页效果</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link type="text/css" rel="stylesheet" href="css/tab.css" />
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/tab.js"></script>
 </head>
 <body>
 <ul id="tabfirst">
 <li class="tabin">标签1</li>
 <li>标签2</li>
 <li>标签3</li>
 </ul>
 <div class="contentin contentfirst">我是内容1</div>
 <div class="contentfirst">我是内容2</div>
 <div class="contentfirst">我是内容3</div>
 <br />
 <br />
 <br />
 <ul id="tabsecond">
 <li class="tabin">装入完整页面</li>
 <li>装入部分页面</li>
 <li>从远程获取数据</li>
 </ul>
 <div id="contentsecond">
 <img alt="装载中" src="images/img-loading.gif" />
 <div id="realcontent"></div>
 </div>
 </body>
</html>

/WebRoot/js/tab.js:

var timoutid;
$(document).ready(function(){
 //找到所有的标签
 /*
 $("li").mouseover(function(){
 //将原来显示的内容区域进行隐藏
 $("div.contentin").hide();
 //当前标签所对应的内容区域显示出来
 });
 */
 $("#tabfirst li").each(function(index){
 //每一个包装li的jquery对象都会执行function中的代码
 //index是当前执行这个function代码的li对应在所有li组成的数组中的索引值
 //有了index的值之后,就可以找到当前标签对应的内容区域
 $(this).mouseover(function(){ 
 var liNode = $(this);
 timoutid = setTimeout(function(){
 //将原来显示的内容区域进行隐藏
 $("div.contentin").removeClass("contentin");
 //对有tabin的class定义的li清除tabin的class
 $("#tabfirst li.tabin").removeClass("tabin");
 //当前标签所对应的内容区域显示出来
 //$("div").eq(index).addClass("contentin");
 $("div.contentfirst:eq(" + index + ")").addClass("contentin");
 liNode.addClass("tabin"); 
 },300); 
 }).mouseout(function(){
 clearTimeout(timoutid); 
 });
 });
 //在整个页面装入完成后,标签效果2的内容区域需要装入静态的html页面内容
 $("#realcontent").load("TabLoad.html");
 //找到标签2效果对应的三个标签,注册鼠标点击事件
 $("#tabsecond li").each(function(index){
 $(this).click(function(){
 $("#tabsecond li.tabin").removeClass("tabin");
 $(this).addClass("tabin");
 if (index == 0) {
 //装入静态完成页面
 $("#realcontent").load("TabLoad.html");
 } else if (index == 1) {
 //装入动态部分页面
 $("#realcontent").load("TabLoad.jsph2");
 } else if (index == 2) {
 //装入远程数据(这里也是一个动态页面输出的数据)
 //$("#realcontent").load("TabData.jsp");
 $("#realcontent").load("TabLoad.jsp");
 }
 });
 });
 //对于loading图片绑定ajax请求开始和交互结束的事件
 $("#contentsecond img").bind("ajaxStart",function(){
 //把div里面的内容清空
 $("#realcontent").html("");
 //整个页面中任意ajax交互开始前,function中的内容会被执行
 $(this).show();
 }).bind("ajaxStop",function(){
 //整个页面中任意ajax交互结束后,function中的内容会被执行 
 $(this).slideUp(5000);
 });
});

/WebRoot/css/tab.css:

ul,li {
 margin: 0;
 padding: 0;
 list-style: none;
}
#tabfirst li {
 float: left;
 background-color: #868686;
 color: white;
 padding: 5px;
 margin-right: 2px;
 border: 1px solid white;
}
#tabfirst li.tabin {
 background-color: #6E6E6E;
 border: 1px solid #6E6E6E;
}
div.contentfirst {
 clear: left;
 background-color: #6E6E6E;
 color: white;
 width: 300px;
 height: 100px;
 padding: 10px;
 display: none;
}
div.contentin {
 display: block;
}
#tabsecond li {
 float: left;
 background-color: white;
 color: blue;
 padding: 5px;
 margin-right: 2px;
 cursor: pointer;
}
#tabsecond li.tabin {
 background-color: #F2F6FB;
 border: 1px solid black;
 border-bottom: 0;
 z-index: 100;
 position: relative;
}
#contentsecond {
 width: 500px;
 height: 200px;
 padding: 10px;
 background-color: #F2F6FB;
 clear: left;
 border: 1px solid black;
 position: relative;
 top: -1px;
}
img {
 display: none;
}

/WebRoot/TabLoad.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>这是一个静态页面</title>
</head>
<body>
 载入静态页面的内容。<br>
 载入静态页面的内容。<br>
 载入静态页面的内容。<br>
 载入静态页面的内容。<br>
 载入静态页面的内容。<br>
 载入静态页面的内容。<br>
</body>
</html>

/WebRoot/TabLoad.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动态页面</title>
</head>
<body>
 <h2>
 <%=new Date() %><br>
 1.这是一个动态页面的一部分<br>
 2.这是一个动态页面的一部分<br>
 3.这是一个动态页面的一部分<br>
 </h2>
 这部分不显示<br>
</body>
</html>

本节学到的JQuery及其他开发知识:

1.一组标签用一个ul来管理,每一个标签是ul中的一个li;标签下面的内容就是用div来管理

2.跟在浮动元素(float)之后的元素会围绕着浮动元素,如果不希望有这种围绕,可以在浮动元素之后的那个元素上定义clear属性,来清除这种效果。

3.实现当前标签和内容区域的融合,可以通过使用相同的背景色,外加当前标签使用同颜色的边框来实现。

4.JQuery中的mouseover,mouseout方法对应标准javascript的onmouseover,onmouseout事件,可以处理鼠标进入和离开的事件。

5.在一个包含了多个元素的JQuery对象上执行each方法,可以注册给each方法的那个function的内容被每一个元素执行。同时这个function还可以接收到一个参数,表示这个元素的索引值。 JQuery中的很多方法也用到了each

6.eq方法可以根据索引值只得到JQuery对象中包含的多个元素中的某一个元素,并仍然返回元素对应的新JQuery对象。

7.选择器中使用eq,例如$(“div:eq(1)”)

8.addClass和removeClass方法用于添加和移除元素的class定义。

9.Javascript中的setTimeout方法可以延时执行某些代码,对应的clearTimeout可以清除设定的延时操作。

10.做一个AJAX应用的时候,可以考虑现在FireFox上调试通过,然后再到其他浏览器中进行检查,并修正可能的兼容性问题。

11.cursor属性可以控制元素上的鼠标样式,pointer的属性值表示手型样式,也就是我们常见的链接鼠标样式

12.position属性可以控制元素定位的方式,值为relative时表示相对原来的位置进行定位。可以通过设定top,left,bottom,right的值来
控制元素相对原来的位置进行移动

13.z-index可以控制元素在页面中的层高,值越大就会在页面的层越靠前,也就会覆盖住一些z-index值较低的元素。只有position的值为relative或absolute的元素,z-index才会生效。

14.JQuery中的load方法十分强大,可以把一个指定的静态,动态页面或服务器端程序输出的数据装入到执行load方法的JQuery对象包装着的元素中。

15.load方法还支持部分装载,在装入的页面地址后面加空格,然后使用选择器,就可以把页面中符合选择器的部分装入进来。

16.被load的页面一定要是UTF-8编码的,否则装入后中文会出现乱码。

17.bind可以用于给指定的节点绑定Javascript的事件或JQuery中定义的事件。对于JQuery中没有直接提供注册方法的事件,可以用这种方式注册。方法的第二个参数可以是事件执行的方法定义。

18.ajaxStart,ajaxStop对应ajax交互开始前和结束后的事件,给某一个节点注册了这两个事件后,当前页面的ajax交互开始前和结束后,就会执行指定的方法。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
js实现自定义右键菜单
May 18 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 #Javascript
JQuery实现Ajax加载图片的方法
Dec 24 #Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 #Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 #Javascript
正则表达式优化JSON字符串的技巧
Dec 24 #Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 #Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 #Javascript
You might like
PHP的开合式多级菜单程序
2006/10/09 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
用python 制作图片转pdf工具
2015/01/30 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
Overload和Override的区别
2012/09/02 面试题
英语教育专业自荐信
2014/05/29 职场文书
网站推广策划方案
2014/06/04 职场文书
单位租房协议范本
2014/12/03 职场文书
优秀党员事迹材料
2014/12/18 职场文书
男方婚礼答谢词
2015/01/20 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
python基础之类属性和实例属性
2021/10/24 Python