`

基于jQuery的标签页效果

阅读更多

JSP代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>JQuery实例-标签页效果</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-1.4.3.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>

 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("load1.jsp");
	//找到标签2效果对应的三个标签,注册鼠标点击事件
	$("#tabsecond li").each(function(index){
		$(this).click(function(){
			$("#tabsecond li.tabin").removeClass("tabin");
			$(this).addClass("tabin");
			if (index == 0) {
				//装入静态完成页面
				$("#realcontent").load("load1.jsp");
			} else if (index == 1) {
				//装入动态部分页面
				$("#realcontent").load("load2.jsp h2");
			} else if (index == 2) {
				//装入远程数据(这里也是一个动态页面输出的数据)
				$("#realcontent").load("load3.jsp")
			}
		});
	});
	//对于loading图片绑定ajax请求开始和交互结束的事件
	$("#contentsecond img").bind("ajaxStart",function(){
		//把div里面的内容清空
		$("#realcontent").html("");
		//整个页面中任意ajax交互开始前,function中的内容会被执行
		$(this).show();
	}).bind("ajaxStop",function(){
		//整个页面中任意ajax交互结束后,function中的内容会被执行	
		$(this).slideUp("1000");
	});
});
 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;
}
 效果

 

  • 大小: 21.9 KB
分享到:
评论

相关推荐

    基于jQuery实现多标签页切换的效果(web前端开发)

    综上所述,通过上述方法,我们可以利用jQuery快速实现美观实用的多标签页切换效果。它不仅提供了丰富的交互体验,同时也使得开发者能够更加高效地管理页面内容。在实际项目中,熟练运用这些技术可以有效提升开发效率...

    基于jquery的鱼眼效果展示(fish eye)

    【基于jQuery的鱼眼效果展示(fish eye)】是一种网页设计技术,用于创建具有视觉吸引力的交互式元素,用户在浏览网页时可以感受到类似鱼眼镜头的放大效果。这种效果通常用于导航菜单或图片展示,使得用户能更直观地...

    多种Jquery页面效果

    基于jQuery的超强多媒体幻灯展示效果 基于jQuery的很酷的弹出层效果js插件 基于jQuery的可爱T恤折叠和展开效果的实现代码 基于jQuery的类似旋转木马的3D分享按钮效果的实现代码 基于jquery的利用z-index实现的多图...

    基于jQuery页面翻转特效.rar_two2tw_基于jQuery页面翻转特效

    【标签】"two2tw 基于jquery页面翻转特效" 进一步强调了这个特效是基于jQuery的,并且可能有一个特定的名称“two2tw”,这可能是特效的特定实现或者代码库的名字。"two2tw"可能是指一种将页面从一个状态翻转到另一个...

    基于jquery的广告轮播

    【标题】:“基于jQuery的广告轮播” 在网页设计中,广告轮播是一种常见的元素,用于展示多张图片或信息,以吸引用户的注意力并提供动态的用户体验。"基于jQuery的广告轮播"是指利用JavaScript库jQuery实现的这种...

    基于jQuery实现滚动切换效果

    基于jQuery实现滚动切换效果的知识点主要包括了以下几个方面: 1. jQuery的基本概念:jQuery是一个快速、简洁的JavaScript库,它通过简化HTML文档遍历和事件处理、动画和Ajax交互,极大地简化了JavaScript编程。在...

    基于JQuery开发的弹窗插件

    【标题】基于JQuery开发的弹窗插件 在Web开发中,弹窗是一种常见的交互方式,用于显示警告、确认信息或提供用户输入等。JQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...

    基于jquery实现的多选下拉框

    **基于jQuery实现的多选下拉框** 在Web开发中,传统的HTML下拉框(`&lt;select&gt;`元素)通常只支持单选,但有时我们可能需要一个可多选的下拉框来提供用户更多的选择灵活性。这篇教程将详细介绍如何利用jQuery库来创建...

    基于jquery的图片放大效果

    "基于jQuery的图片放大效果"是一种常见的交互设计技术,它能够使用户在鼠标悬停或点击图片时看到更清晰、更大的细节,提升浏览体验。jQuery,一个轻量级的JavaScript库,因其简洁的API和丰富的插件而广受欢迎,是...

    基于Jquery的网站设计

    【标题】"基于Jquery的网站设计"是一个关于利用Jquery技术进行网页开发的课程设计项目。Jquery是一个广泛应用于Web开发的JavaScript库,它的主要目的是简化JavaScript的使用,特别是对于DOM操作、事件处理和动画效果...

    基于jquery bootstrap 图片查看器

    **基于jQuery和Bootstrap的图片查看器** 在网页开发中,图片查看器是一个常见的功能,它允许用户以更直观的方式查看和交互图片。本项目利用了流行的前端框架jQuery和Bootstrap,构建了一个具有鼠标点击放大、相册...

    基于jquery实现的et大屏展示源码_大屏展示_前端页面

    本资源“基于jQuery实现的et大屏展示源码”提供了使用jQuery技术实现这类效果的具体实践。jQuery作为一个流行的JavaScript库,简化了DOM操作、事件处理、动画效果以及Ajax交互,使得开发者能够更高效地构建动态网页...

    基于jQuery的移动端前端框架AKjs

    2. **jQuery兼容**:基于jQuery,开发者可以充分利用已有的jQuery知识和生态系统,无缝对接各种jQuery插件。 3. **跨平台兼容**:对iOS和Android系统的出色兼容性确保了在不同设备上的一致性体验。 4. **CSS样式库...

    基于JQuery脚本库的动态效果的设计与实现.pdf

    基于JQuery脚本库的动态效果的设计与实现.pdf 本文主要介绍了基于JQuery脚本库的动态效果的设计与实现,包括滑动门和信息滚动的动画效果。JQuery是一个轻量级的JavaScript函数库,能够让开发者在网页上快速简单地...

    基于jQuery的动态星星评分效果.zip

    【描述】"基于jQuery的动态星星评分效果.zip"是一个压缩包文件,包含了实现这一功能所需的所有资源和代码。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互,使得创建复杂的网页...

    jquery标签式导航菜单demo

    在"jquery标签式导航菜单demo"中,我们看到的是一个基于jQuery实现的动态标签式导航。这种类型的菜单通常包含多个标签,每个标签代表不同的内容区域,用户可以通过点击标签来切换显示的内容。它提高了用户体验,因为...

    JS标签页效果

    在实际项目中,可以基于现有的JS库或框架,如jQuery UI、Bootstrap的Tab组件或Angular Material的MatTab,来快速实现标签页效果。这些库提供了丰富的功能和良好的兼容性,简化了开发过程。 总的来说,实现JS标签页...

    基于JQuery的Banner大图片横向切换效果

    JQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务,而`jquery.cycle.all.min.js`插件是jQuery的一个扩展,专门用于实现各种类型的轮播(Banner)切换效果。本文将深入探讨如何利用...

    基于jQuery的图表库

    基于jQuery的图表库则是利用jQuery的强大功能来创建各种视觉吸引力强、数据展示清晰的图表。这些图表库能够帮助开发者快速地在网页上构建数据可视化组件,使用户能够更好地理解和解析复杂的数据。 标题“基于jQuery...

Global site tag (gtag.js) - Google Analytics