在浏览网站时我们会看到当我们鼠标移到多个选项卡上时，不同的选项卡会出现自己对应的界面的要求，在同一个界面上表达了尽量多的信息、大大额提高了空间的利用率、界面的切换效果也是不错的哦，这次自己可以实现啦。

效果图

制作标签页（通常说成滑动门）的实现思路是当鼠标在标签上时下面div会显示和标签相对应的内容，随着标签的

改变，下面的div也会对应改变样式

我们要实现上面的效果：

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;

	/*设置relative才能设置z-index*/

	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;

}

HTML代码：HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

        <meta http-equiv="Content-Type" content ="text/html;charset=UTF-8" />

        <link href="css/tab.css" rel="stylesheet" type="text/css" />

        <script src="js/jquery.js" type="text/javascript"></script>

        <script src="js/tab.js" type="text/javascript"></script>

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

<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 />

		<ul id="tabsecond">

			<li class="tabin">装入完整页面</li>

			<li>装入部分页面</li>

			<li>从远程获取数据</li>

		</ul>

		<div id="contentsecond" display="block">

			<img alt="装载中" src="data:images/img-loading.gif" />

			<div id="realcontent"></div>

		</div>

    </form>

</body>

</html>

控制滑的JS：

这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟，这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃，用到setTimeout函数，主要用到已下的事件

1      $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法

2      mouseover事件

var timoutid;

$(document).ready(function () {

    //dom准备完毕执行

    $("#tabfirst li").each(function (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);

        });

    });

//加载全部内容

    $("#realcontent").load("allTab.html");

    //注册对应的标签点击事件

    $("#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实战总结三 标签页效果图实现的更多相关文章

  1. JQuery实战总结三 标签页效果图实现

    在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...

  2. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  3. wordpress调用置顶文章sticky_posts的三种方法

    有时我们在开发wordpress时需要调用置顶文章sticky_posts,怎么调用呢?几种写法,有用到query_post的,有用到WP_Query,也有用到is_sticky(),下面随ytkah ...

  4. [置顶] Jquery中DOM操作（详细）

    Jquery中的DOM操作 为了能全面的讲解DOM操作,首先需要构建一个网页. HTML代码: <%@ page language="java" import="j ...

  5. [置顶] Jquery学习总结（二） jquery选择器详解

    1.基本选择器 l ID 根据元素ID选择 l Elementname 根据元素名称选择 l Classname 根据元素css类名选择 举例: <input type=”text” id=”I ...

  6. Jquery实现的Tabs标签页

    效果图: HTML: <div class="tabs"> <ul id="tabs"> <li class="tab- ...

  7. 算法代码[置顶] 机器学习实战之KNN算法详解

    改章节笔者在深圳喝咖啡的时候突然想到的...之前就有想写几篇关于算法代码的文章,所以回家到以后就奋笔疾书的写出来发表了 前一段时间介绍了Kmeans聚类,而KNN这个算法刚好是聚类以后经常使用的匹配技 ...

  8. [置顶] 深入浅出Spring（三） AOP详解

    上次的博文深入浅出Spring(二) IoC详解中,我为大家简单介绍了一下Spring框架核心内容中的IoC,接下来我们继续讲解另一个核心AOP(Aspect Oriented Programming ...

  9. [置顶] JQuery插件学习教程

    这是JQuery其它常用插件的视频教程,包括validate插件,.comet插件等.同时有大量实例项目,如果你是喜欢JQuery的童鞋千万不要错过. 教程的内容有: 1_validate插件(1) ...

随机推荐

  1. 【Cocos2d-X开发学习笔记】第28期：游戏中音乐和音效的使用

    本系列学习教程使用的是cocos2d-x-2.1.4(最新版为3.0alpha0-pre) ,PC开发环境Windows7,C++开发环境VS2010 UI在游戏中占有很重要的地位,但吸引玩家的除了这 ...

  2. 最长公共子序列python实现

    最长公共子序列是动态规划基本题目,以下依照动态规划基本步骤解出来. 1.找出最优解的性质,并刻划其结构特征 序列a共同拥有m个元素,序列b共同拥有n个元素,假设a[m-1]==b[n-1],那么a[: ...

  3. HDU1584：蜘蛛牌(DFS)

    Problem Description 蜘蛛牌是windows xp操作系统自带的一款纸牌游戏,游戏规则是这样的:只能将牌拖到比她大一的牌上面(A最小,K最大),如果拖动的牌上有按顺序排好的牌时,那么 ...

  4. linux公社的大了免费在线android资料

    2011年linux数据库的android在线分享 linux公社:开源公社             本文撰写:杨凯专属频道 2011年9月12日 21:39 <目录> Android 3 ...

  5. sofa-pbrpc 1.1.1 发布，RPC 网络通信库

    https://www.oschina.net/news/77372/sofa-pbrpc-1-1-1 https://www.oschina.net/p/sofa-pbrpc

  6. Android菜鸟的成长笔记（2）——第一个Android应用

    原文:Android菜鸟的成长笔记(2)--第一个Android应用 上一篇:Android菜鸟的成长笔记(1)--Anddroid环境搭建从入门到精通 在上一篇Android菜鸟的成长笔记(1)中我 ...

  7. 【Demo 0001】Java基础-数据类型

    本章学习要点:       1.  了解Java 语言       2.  了解Java程序结构;        3.  了解Java中基本数据类型;       4.  掌握基本数据类型之间的运算 ...

  8. Thinkphp框架拓展包使用方式详细介绍--验证码实例（十一）

    原文:Thinkphp框架拓展包使用方式详细介绍--验证码实例(十一) 拓展压缩包的使用方式详细介绍 1:将拓展包解压:ThinkPHP3.1.2_Extend.zip   --> 将其下的 \ ...

  9. 事务不提交,也有可能写redo和数据文件

    事务不提交,也有可能写redo和数据文件

  10. poj3642 Charm Bracelet(0-1背包)

    题目意思: 给出N,M,N表示有N个物品,M表示背包的容量.接着给出每一个物品的体积和价值,求背包可以装在的最大价值. http://poj.org/problem? id=3624 题目分析: o- ...