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

深碍√TFBOYSˉ_ 2023-07-01 08:49 1阅读 0赞

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

##  效果图 ##

![Center][]

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

通过网上的好多网站的实例：值得我们深入的研究学习，站在巨人的肩膀上哈！

![Center 1][]

[Center]: https://img-blog.csdn.net/20130827170344937?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGlzaGVoZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20130827173320250?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGlzaGVoZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center