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

效果图

制作标签页（通常说成滑动门）的实现思路是当鼠标在标签上时下面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. 基于visual Studio2013解决C语言竞赛题之1060寻找回文数

       题目 解决代码及点评 /* 60. 回文数指左右数字对称的数,如121,2112都是回文数.回文数猜想:取一任意十进制数,将其倒过来,并将这两个数相加, 然后把这个相加的和倒过来再与 ...

  2. javascript 判断IOS版本号

    先来观察 iOS 的 User-Agent 串: iPhone 4.3.2 系统: Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; ...

  3. 使用gradle打包jar包

    近期用android studio来做android开发的IDE,它是使用gradle来构建的,于是開始学习gradle. 如今有一个项目,里面有一个android-library的模块.我想在做re ...

  4. ASP.NET - 服务器控件button 先执行js 再执行后台的方法

    关于button这个服务器控件,我一直想减少它向服务器提交数据.那些检测,还是在客户端实现就好了.这就需要javascript,但是我发现仅仅有javascript还是不够的.button服务器控件的 ...

  5. 转换函数CONVERSION_EXIT_TSTRN_OUTPUT

    CONVERSION_EXIT_TSTRN_OUTPUT 在路线表TVRO中字段TDVZND 运输提前时间,取出来的数值没有转换,需要此函数进行转换.如14400,000  转换后为14,400:00 ...

  6. [SVN] 分支同步、合入主干操作分享

    冲突的解决原则 不是自己修改的地方就使用主干的. 需要特别注意的是: 分支同步主干时,远端(theirs)是主干,本地(mine/working)的是分支: 分支合入主干时,本地(mine/worki ...

  7. 【安卓】eclipse中不可错过的几个秘密、！

    1.PackageExplorer显示文件层次的默认方式是平行列出全部包,事实上也可显示成多级,并且效果比navigator好多了. PackageExplorer视图中,"右上角箭头→pa ...

  8. 一种H.264高清视频的无参考视频质量评价算法（基于QP和跳过宏块数）

    本文记录一种无参考视频质量评价算法.这是我们自己实验室前两年一个师姐做的,算法还是比较准确的,在此记录一下. 注意本算法前提是高清视频.而且是H.264编码方式. 该方法主要使用两个码流里面的参数进行 ...

  9. 关于IOCP，某些地方就是不让人彻底舒服(WSASend重叠post数据)

    开门见山,直接就事论事. 假如有这么一个基于IOCP模型的Server,这个Server提供的所有服务中有这么一种服务……文件下载,我们再假设Server端存有一个20G的文件,客户端这时发送一个请求 ...

  10. android面试题 不仅仅是面试是一个很好的学习

    下面的问题是在网上找到的总结,感谢您分享!希望,我们的共同进步,找到自己心仪的公司,: 1.android dvm 流程和Linux这个过程.无论是应用程序对同一概念: 答案:dvm是dalivk虚拟 ...