在学习jquery的过程中，发现这样一段代码，在别的就jquery 教程中没有看到过，有需要的朋友，亲手实测下吧，效果不错的。

1、前台页面。

   
      
      
        jquery标签页效果_脚本学堂_www.  
          
          
          
      
      
    
  
        
标签1
  
        
标签2
  
        
标签3
  
    
  
    
我是内容1
  
    
我是内容2
  
    
我是内容3
  
    
  
    
  
    
  
    
  
        
装入完整页面
  
        
装入部分页面
  
        
从远程获取页面
  
    
  
    
  
          
      
        
  
    
  
      
    

2、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: 500px;  
        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;  
        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;  
    }

3、jquery代码

   var timeoutid;  
    $(function() {  
        //先找到所有的标签  
        /* $("#li").mouseover(function(){ 
         //将原来显示的内容区进行隐藏 
         //当前标签所对应的内容区域显示出来 
         });*/  
        $("#tabfirst li").each(function(index) {  
            //每一个包装了li的jquery的对象，都会执行function中的代码  
            //index是当前执行这个function代码的li对应在所有li组成的数组  
            //中的索引值  
            //有了Index的值之后，就可以找到当前标签对应的内容区域  
            $(this).mouseover(function() {  
                var liNode = $(this);  
                timeoutid = setTimeout(function() {  
                    //将原来显示的内容区进行隐藏  
                    $("div.contentin").removeClass("contentin");  
                    //清除tabin的class定义  
                    $("#tabfirst li.tabin").removeClass("tabin");  
                    //当前标签所对应的内容区域显示出来  
                    $("div.contentfirst").eq(index).addClass("contentin");  
                    liNode.addClass("tabin");  
                }, 300);  
            }).mouseout(function() {  
                clearTimeout(timeoutid);  
            });  
        });  
        //在整个页面装入完成之后，标签效果2的内容区域需要装入静态html页面内容  
        $("#realcontent").load("TabLoad.html");  
        //找到标签2效果对应的三个标签，注册鼠标点击时间  
        $("#tabsecond li").each(function(index) {  
      
            $(this).click(function() {  
                $("#tabsecond li.tabin").removeClass("tabin");  
                $(this).addClass("tabin");  
                if (index == 0) {  
                    $("#realcontent").load("TabLoad.html");  
                } else if (index == 1) {  
                    $("#realcontent").load("TabLoad.jsp h2");  
                } else if (index == 2) {  
                    //装入远程数据（这里也是一个动态页面输出的数据）  
                    $("#realcontent").load("TabData.jsp");  
                }  
            });  
      
        });  
        //对于loading图片的绑定ajax请求开始和交互结束的事件  
        $("#contentsecond img").bind("ajaxStart", function() {  
            //把div里面的内容清空  
            $("#realcontent").html("");  
            //整个页面中任意ajax交互开始前，function中的内容会被执行  
            $(this).show();  
        }).bind("ajaxStop", function() {  
            //整个页面中任意ajax交互结束后，function中的内容会被执行  
            $(this).slideUp("1000");  
        });  
      
    });

您可能感兴趣的文章: