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

效果图

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

    第1次实验 课堂实验内容:Java入门+Eclipse+PTA+Git+博客 实验任务书:第01次试验(安装JDK.编辑器.编写出第一个Java程序).pdf Eclipse简明教程(by郑如滨).p ...

  2. ThreadLocal(线程绑定)

    为保证在DAO层里的操作都在同一事务里,我们曾使用以参数的形式将Connection向下传递的方式,而ThreadLocal来创建Connection连接,避免了一直以参数的形式将Connection ...

  3. Bootstrap3 表格-紧缩表格

    通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半. <table class="table table-condensed&q ...

  4. Bootstrap3 排版-引用

    在你的文档中引用其他来源的内容. 默认样式的引用 将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式.对于直接引用,我们建议用 <p> 标签. Lor ...

  5. 奥比中光Orbbec Astra Pro RGBD 3D视觉传感器在ROS（indigo和kinetic）使用说明 rgb depth同时显示

    Orbbec Astra Pro传感器在ROS(indigo和kinetic)使用说明 rgb depth同时显示 这款摄像头使用uvc输入彩色信息,需要libuvc和libuvc_ros这样才能在R ...

  6. Java异常处理机制难点解惑-用代码说话

    是否需要看这篇文章? 下面的例子中,如果正常执行返回值多少? 如果出现了ArithmeticException返回值多少? 如果出现非ArithmeticException(如NullPointerE ...

  7. 指令汇B新闻客户端开发（六） 浅谈屏幕适配解决方案

    屏幕适配的问题,我相信很多大牛的经验远比我丰富,在此就简单的分享一下我所做的的屏幕适配方案,当然我说的是安卓方面的啦,嘿嘿,屏幕适配我们一般用1280*720的屏幕作为我们的主流开发屏,当然现在And ...

  8. 实现一个最简单的VIM文本编辑器(可能有bug，随便写了一个)

    简单的写了一个文本编辑器,功能很简单,但足以把文件IO相关的操作熟悉了,可能功能或者分配的大小还不够完善.请参考参考: #include <stdio.h> #include <co ...

  9. Springmvc注解注入的简单demo

    今天看了注解注入觉得确实简化了xml配置,一般情况下Spring容器要成功启动的三大要件分别是:Bean定义信息,Bean实现类,以及spring本身.如果采取基于XML的配置,Bean信息和Bean ...

  10. Android旋转动画

    Android旋转动画 核心方法 public void startAnimation(Animation animation) 执行动画,参数可以是各种动画的对象,Animation的多态,也可以是 ...