欢迎来到  磐实编程网 网站导航|磐实首页|开发文章|编程资源|开源代码|云集|源问

开发文章
开发文章 > Web开发 > JavaScript开发教程

jQuery实现标签页效果

今天我们来完成《jQuery实战》系列的标签页效果。先来看一看效果图

标签页效果.png

这里有两部分的内容，上面是一个标签页的效果，下面也是一个标签页的效果。在实际应用中也经常会见到标签页的效果，它的作用主要是在页面可视区有限的情况下展示更多的内容。当用户想看其他内容的时候不需要离开页面，只需要把鼠标移动到某一个标签上就可以看到这个标签里面所对应的内容。门户网站的首页，有很多频道都是标签页的最佳案例，如体育、财经、军事等模块都是位于不同的标签上。上边的标签页一般称为滑动门技术，下面的内容是一次性加载进来，鼠标移动到某个标签之后，下面的内容就跟着显示对应的内容，不需要加载页面。而下面的标签页选用另一种写法，这是通过其他页面load进来的，当你滑动到某个标签的时候，加载对应的页面。

好了，开始编写我们的代码，首先是编写html页面”tab.jsp”。

复制内容到剪贴板
  1. <body>    
  2.     <ul id="tabfirst">  
  3.         <li class="tabin">标签1</li>  
  4.         <li>标签2</li>  
  5.         <li>标签3</li>  
  6.     </ul>  
  7.     <div class="contentin contentfirst">我是内容1</div>  
  8.     <div class="contentfirst">我是内容2</div>  
  9.     <div class="contentfirst">我是内容3</div>     
  10. </body>  

一般标签我们都用ul和li来表示，每个li代表一个标签，里面有三个li,分别是标签1，标签2，标签3，下面内容区域是3个div,这三个div是预先装载进来的。这时候的基本骨架已经完成，接下来编写css代码。
第一步把ul里面的li改造为标签的效果。回忆上节的课程，li默认是纵向的效果，我们想把它变成横向用清楚li的特征，然后让其float漂移达到相应的效果。

复制内容到剪贴板
  1. $(document).ready(function() {  
  2.     $("#tabfirst li").mouseover(function() {  
  3.         //1.将原来深颜色的li去掉  
  4.         $(".tabin").removeClass("tabin");  
  5.         //2.将原来显示的div隐藏  
  6.         $(".contentin").removeClass("contentin");  
  7.         //3.计算鼠标点中哪一个li  
  8.         var chooseStr = $(this).html();  
  9.         var index = 0;  
  10.         if("标签1" == chooseStr) {  
  11.             index = 0;  
  12.         } else if("标签2" == chooseStr) {  
  13.             index = 1;  
  14.         } else if("标签3" == chooseStr) {  
  15.             index = 2;  
  16.         }  
  17.         //4.将对应的div显示和对应的li加深  
  18.         $("#tabfirst li:eq("+index+")").addClass("tabin");  
  19.         $("div.contentfirst:eq("+index+")").addClass("contentin");  
  20.     });  
  21. });  

这里的mouseover()函数的含义是当鼠标进入li时执行函数里面的代码。函数里面的代码先将原来深颜色的li去掉，然后将原来显示的div隐藏，计算鼠标点中哪一个li赋值在index变量中，最后对应的div显示和对应的li加深和将对应的div显示。

下面的标签页思路一样，真个完整的html页面如下:

复制内容到剪贴板
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <link type="text/css" rel="stylesheet" href="../css/tab.css" />  
  8. <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>  
  9. <script type="text/javascript" src="../js/tab.js"></script>  
  10. <title>jQuery实战:tab页签</title>  
  11. </head>  
  12. <body>    
  13.     <ul id="tabfirst">  
  14.         <li class="tabin">标签1</li>  
  15.         <li>标签2</li>  
  16.         <li>标签3</li>  
  17.     </ul>  
  18.     <div class="contentin contentfirst">我是内容1</div>  
  19.     <div class="contentfirst">我是内容2</div>  
  20.     <div class="contentfirst">我是内容3</div>  
  21.     <br />  
  22.     <br />  
  23.     <br />  
  24.     <ul id="tabsecond">  
  25.         <li class="tabin">装入完整页面</li>  
  26.         <li>装入部分页面</li>  
  27.         <li>从远程获取数据</li>  
  28.     </ul>  
  29.     <div id="contentsecond">  
  30.         <img alt="装载中" src="../image/img-loading.gif" />  
  31.         <div id="realcontent"></div>  
  32.     </div>  
  33. </body>  
  34. </html>  

css文件如下:

复制内容到剪贴板
  1. ul,li {  
  2.     margin: 0;  
  3.     padding: 0;  
  4.     list-style: none;  
  5. }  
  6. #tabfirst li {  
  7.     float: left;  
  8.     background-color: #868686;  
  9.     color: white;  
  10.     padding: 5px;  
  11.     margin-right: 2px;  
  12.     border: 1px solid white;  
  13. }  
  14. #tabfirst li.tabin {  
  15.     background-color: #6E6E6E;  
  16.     border: 1px solid #6E6E6E;  
  17. }  
  18. div.contentfirst {  
  19.     clear: left;  
  20.     background-color: #6E6E6E;  
  21.     color: white;  
  22.     width: 300px;  
  23.     height: 100px;  
  24.     padding: 10px;  
  25.     display: none;  
  26. }  
  27. div.contentin {  
  28.     display: block;  
  29. }  
  30.   
  31. #tabsecond li {  
  32.     float: left;  
  33.     background-color: white;  
  34.     color: blue;  
  35.     padding: 5px;  
  36.     margin-right: 2px;  
  37.     cursor: pointer;  
  38. }  
  39. #tabsecond li.tabin {  
  40.     background-color: #F2F6FB;  
  41.     border: 1px solid black;  
  42.     border-bottom: 0;  
  43.     z-index: 100;  
  44.     position: relative;  
  45. }  
  46. #contentsecond {  
  47.     width: 500px;  
  48.     height: 200px;  
  49.     padding: 10px;  
  50.     background-color: #F2F6FB;  
  51.     clear: left;  
  52.     border: 1px solid black;  
  53.     position: relative;  
  54.     top: -1px;  
  55. }  
  56. img {  
  57.     display: none;  
  58. }  

jQuery代码如下:

复制内容到剪贴板
  1. /** 
  2.  *  tab页面模块的js代码 
  3.  */  
  4.   
  5. $(document).ready(function() {  
  6.     $("#tabfirst li").each(function(index){  
  7.         //每一个包装li的jquery对象都会执行function中的代码  
  8.         //index是当前执行这个function代码的li对应在所有li组成的数组中的索引值  
  9.         //有了index的值之后，就可以找到当前标签对应的内容区域  
  10.         $(this).mouseover(function(){    
  11.             var liNode = $(this);  
  12.             timoutid = setTimeout(function(){  
  13.                 //将原来显示的内容区域进行隐藏  
  14.                 $("div.contentin").removeClass("contentin");  
  15.                 //对有tabin的class定义的li清除tabin的class  
  16.                 $("#tabfirst li.tabin").removeClass("tabin");  
  17.                 //当前标签所对应的内容区域显示出来  
  18.                 //$("div").eq(index).addClass("contentin");  
  19.                 $("div.contentfirst:eq(" + index + ")").addClass("contentin");  
  20.                 liNode.addClass("tabin");     
  21.             },300);           
  22.         }).mouseout(function(){  
  23.             clearTimeout(timoutid);   
  24.         });  
  25.     });  
  26.   
  27.     //在整个页面装入完成后，标签效果2的内容区域需要装入静态的html页面内容  
  28.     $("#realcontent").load("../jsp/tabLoad.html");  
  29.     //找到标签2效果对应的三个标签，注册鼠标点击事件  
  30.     $("#tabsecond li").each(function(index){  
  31.         $(this).click(function(){  
  32.             $("#tabsecond .tabin").removeClass("tabin");  
  33.             $(this).addClass("tabin");  
  34.   
  35.             if(0 == index) {  
  36.                 $("#realcontent").load("../jsp/tabLoad.html");  
  37.             } else if(1 == index) {  
  38.                 $("#realcontent").load("../jsp/tabLoad1.html h2");  
  39.             } else if(2 == index) {  
  40.                 $("#realcontent").load("/JqueryStudy/tabServlet");  
  41.             }  
  42.         });  
  43.     });  
  44.   
  45.     //对于loading图片绑定ajax请求开始和交互结束的事件  
  46.     $("#contentsecond img").bind("ajaxStart",function(){  
  47.         $("#realcontent").html("");  
  48.         $(this).show();  
  49.     }).bind("ajaxStop", function(){  
  50.         $(this).slideUp("1000");  
  51.     });  
  52. });  

代码参考地址：https://github.com/shizongger/JqueryInAction

参考资料：
1. 王兴奎《jQuery实战》
2. w3school

 

感谢 少年张翠山 支持 磐实编程网 原文地址：
blog.csdn.net/zhang5476499/article/details/54664596

上一篇：JavaScript中作用域链和闭包

下一篇： javascript数组以及对象的深拷贝方法

文章信息

发布时间：2017-02-01

作者：少年张翠山

发布者：aquwcw

浏览次数：