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 相关文章推荐
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
浅谈javascript的分号的使用
May 12 Javascript
浅析JS异步加载进度条
May 05 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
浅谈Vue的响应式原理
May 30 Javascript
JS Object构造函数之Object.freeze
Apr 28 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编程每天必学之验证码
2016/03/03 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
解读! Python在人工智能中的作用
2017/11/14 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
如何完美的建立一个python项目
2020/10/09 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
《问银河》教学反思
2014/02/19 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
党员实事承诺书
2014/03/26 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
教师工作失职检讨书
2014/09/18 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis