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

效果图

制作标签页（通常说成滑动门）的实现思路是当鼠标在标签上时下面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="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. Jquery实现的Tabs标签页

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

  4. 《vue.js实战》练习---标签页组件

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  5. jQuery菜单，导航与标签页

    一:导航 网站导航栏是网站导航的第一层导航结构,我们可以使用HTML和jQuery来创建类似flash的动画效果 一:下拉式菜单  法一: <!DOCTYPE html PUBLIC " ...

  6. jquery实战---标签页效果

    在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...

  7. 实战Jquery(四)--标签页效果

            这两天完毕了实战四五六的样例,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗体效果,都是web层经常使用的效果.越到后面越发认为技术这东西,就是一种思路的展现,懂了要实现 ...

  8. jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

  9. 如何一行jquery代码写出tab标签页（链式操作）

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

随机推荐

  1. Canvas实现3D效果-可旋转的立方体

    摘要:Canvas画布是一个二维平面,如何展示出3D效果?通过将三维空间中的Z轴抽取出来,将图像的点投影到与Z轴垂直的平面上,在通过旋转等变换效果,我们就能实现3D效果. 一.建立坐标系 1)立方体坐 ...

  2. Java第9次实验(网络)

    参考资料 本次作业参考文件 正则表达式参考资料 注:主要根据实验任务书的指导完成本次实验. 第1次实验 1. 网络基础 ipconfig.ping telnet(连接BBS与连接Web服务器的不同) ...

  3. Bootstrap3 表格-带边框的表格

    添加 .table-bordered 类为表格和其中的每个单元格增加边框. <table class="table table-bordered"> ... </ ...

  4. windows10，redhat6.5下python3.5.2使用cx_Oracle链接oracle

    0.序言 项目主要使用oracle但是我不太喜欢其他编程语言,加上可能需要用python部署算法包,从oracle表中读出数据,处理完成后在放回oracle中去,所以在windows上就想到先用pyt ...

  5. RxJava(10-操作符原理&自定义操作符)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/51791120 本文出自:[openXu的博客] 目录: 自定义创建操作符 数据序列操作符li ...

  6. sql group句子

    rollup SELECT employee_id,department_id,job_id,SUM(salary) FROM employees WHERE department_id <60 ...

  7. ORACLE数据库学习之逻辑结构

     逻辑结构 数据库逻辑结构包含表空间.段.范围(extent).数据块和模式对象. (一)表空间 一个数据库划分为一个或多个逻辑单位,该逻辑单位称为表空间类似于sybase下的设备.(TABLES ...

  8. 6.QT信号和槽

     新建项目SignalAndSlot项目 编写代码如下: mysignal.h #ifndef MYSIGNAL_H #define MYSIGNAL_H   #include <QObje ...

  9. FFmpeg源代码结构图 - 编码

    ===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...

  10. Java在Linux下 不能处理图形的解决办法 Can't connect to X11 window server

    java在图形处理时调用了本地的图形处理库.在利用Java作图形处理(比如:图片缩放,图片签名,生成报表)时,如果运行在windows上不会出问题.如果将程序移植到Linux/Unix上的时候有可能出 ...