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 相关文章推荐
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
layui实现三级导航菜单
Jul 26 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
package.json配置文件构成详解
Aug 27 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 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随机输出名人名言的代码
2012/10/07 PHP
Destoon模板制作简明教程
2014/06/20 PHP
javascript+mapbar实现地图定位
2010/04/09 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
python中Apriori算法实现讲解
2017/12/10 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
Python中交换两个元素的实现方法
2018/06/29 Python
python保存网页图片到本地的方法
2018/07/24 Python
python爬取淘宝商品销量信息
2018/11/16 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
浅析Python面向对象编程
2020/07/10 Python
婚纱摄影师求职信
2014/03/07 职场文书
绿色学校实施方案
2014/03/31 职场文书
应届大专生自荐书
2014/06/16 职场文书
2014年征兵标语
2014/06/20 职场文书
管理标语大全
2014/06/24 职场文书
赞助商致辞
2015/07/30 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
《假如》教学反思
2016/02/17 职场文书
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js