[置顶] JQuery实战总结三 标签页效果图实现

时间：2021-12-28 06:10:00

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

效果图

[置顶] JQuery实战总结三 标签页效果图实现

制作标签页（通常说成滑动门）的实现思路是当鼠标在标签上时下面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实战总结三 标签页效果图实现

相关文章