jquery实战---标签页效果

         在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载哦`(*∩_∩*)′,点击即可下载!我们先来看一下最终的效果图。

        

        如我们上述图片展示的,这个页面当中包含两个部分,上下各有一个标签页,我们经常会在web应用当中,看到标签页效果,主要的作用是在可视区内有限的区域内,在某一个区域内展现一些内容给用户,上面一个标签页,我们称之为滑动门技术,鼠标移动懂某一个标签的时候,内容会跟着变动,好了,对于这个小例子的实现效果小编就先介绍到这里,接着,我们开始来编写我们的代码,首先,我们来看html的代码该如何编写nie,代码如下所示:

<!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.js"></script>
		<script type="text/javascript" src="js/tab.js"></script>
	</head>
	<body>
	<ul>
	    <li>标签1</li>
		<li>标签2</li>
		<li>标签3</li>
	</ul>
	<div>我是内容1</div>
	<div>我是内容2</div>
	<div>我是内容3</div>
	</body>
</html>

       我们来看一下运行的效果,会有怎样的惊喜等着我们?

        

        可以发现,经过编写html代码后,我们的运行效果如上图所示,但是这个效果和我们最终需要实现的效果,相差了十万八千里,但是html的工作已经完成了,因为页面上只有这些内容,至于如何展现一个标签页的效果,是css的工作,接着,我们来编写css的代码,如下所示:

ul,li{
   margin: 0;
   padding: 0;
   list-style: none;
 }
 li{
    float:left;
	background-color:#868686;
	color:white;
	padding:5px;
	margin-right:2px;
	border:1px solid white;
 }
 li.tabin{
   background-color:#6E6E6E;
   border:1px solid white;
 }
div{
	clear: left;
	background-color: #6E6E6E;
	color: white;
	width: 300px;
	height: 100px;
	padding: 10px;
	display: none;
}
div.contentin {
	display: block;
}

        我们来分析一下上面的代码,我们发现一组标签用一个ul来管理,每一个标签是ul中的一个li,标签下面的内容就是用div来管理。编写了css之后的效果会是什么样子呢?我们来看一下运行效果:

        
        至此,我们css代码的编写工作已经完成了,css保证了在没有js的情况下,标签页的效果依然可以展现给用户,接着,我们来编写js的代码,  相应的,在js中我们也要建立两个文件,一个jquery一个tab,鉴于jquery的代码较多,所以小编已经上传相关资源,有需要的小伙伴可以到该链接下载,接着,我们来编写tab的代码,来给整理页面添加行为能力,代码如下所示:

        

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);
		});
	});
	

        我们来看一下运行效果,如下图所示:

              

         至此,我们的第一个标签页的效果就已经编写完成了,接着,我们来编写第二个标签页的效果,在此,小编温馨提醒一下,第二个标签页的代码,小编是在第一个标签页效果的基础上添加的,好的,来看看我们第二个标签页的效果是如何实现的nie,首先,我们来看html的代码,如下所示:

         

<!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.js"></script>
		<script type="text/javascript" src="js/tab.js"></script>
	</head>
	<body>
		<ul id="tabfirst">
			<li class="tabin">科技</li>
			<li>经济</li>
			<li>体育</li>
		</ul>
		<div class="contentin contentfirst">科技新闻</div>
		<div class="contentfirst">经济新闻</div>
		<div class="contentfirst">体育新闻</div>
		<br />
		<br />
		<br />
		<ul id="tabsecond">
			<li class="tabin">装入完整页面</li>
			<li>装入部分页面</li>
			<li>从远程获取数据</li>
		</ul>
		<div id="contentsecond" display="block">
			<img alt="装载中" src="images/img-loading.gif" />
			<div id="realcontent"></div>
		</div>
	</body>
</html>

        接着,我们来编写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;
}

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

        最后,我们来看一下运行效果,如下图所示:

         

         小编寄语:jquery实战,标签页效果的讲解,到这里就要和小伙伴们说再见了,相关源码,小编已经上传,有需要的小伙伴可以点击下载哦`(*∩_∩*)′,通过这个小例子的学习,我们知道z-index可以控制元素在页面中的层高,值越大就会在页面的层越靠前,也就会覆盖住一些z-index值较低的元素,只有position的值为relative或者是absolute的元素,z-index才会生效。jquery中的load方法十分强大,可以把一个指定的静态、动态页面或服务器端程序输出的数据装入到执行load方法的jquery对象包装的元素中。除此之外,我们还学习到bind可以用于给指定的节点绑定js的事件或jquery中定义的事件,对于jquery中没有直接提供注册方法的事件,可以用这种方式注册,方法的第二个参数可以是事件执行的方法定义。通过一个小例子的学习,我们收获了很多,也懂得了很多,但是所有的收获和懂得,都需要我们自己亲自去动手,去实践!

时间: 2015-06-18

jquery实战---标签页效果的相关文章

jQuery实现简单的tab标签页效果_jquery

本文实例讲述了jQuery实现简单的tab标签页效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab1</title> <style type="text/css"> *{ padding: 0; margin: 0;} li{ l

JQuery标签页效果的两个实例讲解(4)_jquery

按照惯例,我们还是先来看一下最终要达到效果图: 和上一个菜单效果类似,当鼠标移动到标签上的时候,下面会显示相应的内容.当然,同样存在滑动门的问题. 前台页面的代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %> <!DOCTYPE html PUBLIC "-//W3C//

JS实现标签页效果(配合css)_javascript技巧

实现的效果: 如上图所示为制作的标签页,我们想要实现的效果是当鼠标移到某一个标签的时候,在下面的内容区显示对应的内容,并且相应标签的颜色需要改变,如图中所示当前鼠标的位置在"标签1"上,则内容区域显示的内容为"我是内容1",并且"标签1"的颜色要比"标签2"和"标签3"深一些,同样鼠标移到"标签2"和"标签3"的时候显示"我是内容2"和"

android widget-android版chrome上的标签页效果是怎么实现的?求助

问题描述 android版chrome上的标签页效果是怎么实现的?求助 android版chrome的标签页效果是怎么实现的?求助啊!可上下滑动,左右滑动删除!

jquery tab标签页的制作_jquery

这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟,这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃,用到setTimeout函数,主要用到已下的事件 1 $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法 2 mouseover事件, 还有就是关键的css样式编写,控制显示的样式, 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&

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

这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,html和css代码如下: <ul id="tab"> <li id="tab1" onclick="show(1)">10元套餐</li> <li id="tab2" onclick=&quo

jquery中实现标签切换效果的代码_jquery

核心代码: 复制代码 代码如下: $("ul > li").hover(tab); function tab() { $(this).addClass("ll").siblings().removeClass("ll"); var tab = $(this).attr("title"); $("#" + tab).show().siblings().hide(); }; li中和title必须和div

js与jquery分别实现tab标签页功能的方法_javascript技巧

本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 <style type="text/css"> *{margin: 0;padding: 0;} #myul li {list-style: none; float: left; border: 1px solid #ddd; width: 100px; height: 20px; text-align: center; line-height: 2

jQuery实现手机版页面翻页效果的简单实例_jquery

如下所示: var page = 1; var size = 6; var mark = 0; var url = "{pigcms{:U('Order/index', array('page'=>'d%'))}"; var commentTpl = '<div style="margin-top: 10px">\ <button data-oid="<order_id>" style="width: